docs: rename basic examples' filename and component tag name

src/components/badge/badge.tsx

@@ -5,7 +5,7 @@ import { abbreviate } from './format';
  * The Badge component can be used to display a notification badge,
  * optionally with a number or a text label.
  *
- * @exampleComponent limel-example-badge
+ * @exampleComponent limel-example-badge-basic
  * @exampleComponent limel-example-badge-number
  * @exampleComponent limel-example-badge-string
  */

src/components/badge/examples/badge.scss → src/components/badge/examples/badge-basic.scss

@@ -1,3 +1,3 @@
-:host(limel-example-badge) {
+:host(limel-example-badge-basic) {
     --badge-background-color: rgb(var(--color-red-default));
 }

src/components/badge/examples/badge.tsx → src/components/badge/examples/badge-basic.tsx

@@ -17,8 +17,8 @@ import { Component, h } from '@stencil/core';
  *:::
  */
 @Component({
-    tag: 'limel-example-badge',
-    styleUrl: 'badge.scss',
+    tag: 'limel-example-badge-basic',
+    styleUrl: 'badge-basic.scss',
     shadow: true,
 })
 export class BadgeExample {

src/components/banner/banner.tsx

@@ -1,7 +1,7 @@
 import { Component, h, Method, Prop, State } from '@stencil/core';
 
 /**
- * @exampleComponent limel-example-banner
+ * @exampleComponent limel-example-banner-basic
  * @slot buttons - Buttons to show in the banner
  */
 @Component({

src/components/banner/examples/banner.tsx → src/components/banner/examples/banner-basic.tsx

@@ -1,13 +1,13 @@
 import { Component, Element, h, State } from '@stencil/core';
 
 @Component({
-    tag: 'limel-example-banner',
+    tag: 'limel-example-banner-basic',
     shadow: true,
-    styleUrl: 'banner.scss',
+    styleUrl: 'banner-basic.scss',
 })
 export class BannerExample {
     @Element()
-    private host: HTMLLimelExampleBannerElement;
+    private host: HTMLLimelExampleBannerBasicElement;
 
     @State()
     private disabled = false;

src/components/button-group/button-group.tsx

@@ -42,7 +42,7 @@ import { createRandomString } from '../../util/random-string';
  * inherits its width from its content.
  *
  * @exampleComponent limel-example-button-group-icons
- * @exampleComponent limel-example-button-group
+ * @exampleComponent limel-example-button-group-basic
  * @exampleComponent limel-example-button-group-mix
  * @exampleComponent limel-example-button-group-badges
  * @exampleComponent limel-example-button-group-composite

src/components/button-group/examples/button-group.tsx → src/components/button-group/examples/button-group-basic.tsx

@@ -8,7 +8,7 @@ import { Button, LimelButtonGroupCustomEvent } from '@limetech/lime-elements';
  * descriptive enough.
  */
 @Component({
-    tag: 'limel-example-button-group',
+    tag: 'limel-example-button-group-basic',
     shadow: true,
 })
 export class ButtonGroupExample {

src/components/checkbox/checkbox.tsx

@@ -33,7 +33,7 @@ import { Label } from '../dynamic-label/label.types';
  * But there is an important difference between the two! Please read our guidelines about
  * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
  *
- * @exampleComponent limel-example-checkbox
+ * @exampleComponent limel-example-checkbox-basic
  * @exampleComponent limel-example-checkbox-helper-text
  * @exampleComponent limel-example-checkbox-readonly
  */

src/components/checkbox/examples/checkbox.scss → src/components/checkbox/examples/checkbox-basic.scss

@@ -1,4 +1,4 @@
-:host(limel-example-checkbox) {
+:host(limel-example-checkbox-basic) {
     display: flex;
     flex-direction: column;
     gap: 1rem;

src/components/checkbox/examples/checkbox.tsx → src/components/checkbox/examples/checkbox-basic.tsx

@@ -1,9 +1,9 @@
 import { Component, h, State } from '@stencil/core';
 
 @Component({
-    tag: 'limel-example-checkbox',
+    tag: 'limel-example-checkbox-basic',
     shadow: true,
-    styleUrl: 'checkbox.scss',
+    styleUrl: 'checkbox-basic.scss',
 })
 export class CheckboxExample {
     @State()

src/components/chip-set/chip-set.tsx

@@ -51,7 +51,7 @@ import { createRandomString } from '../../util/random-string';
  * ```
  * :::
  *
- * @exampleComponent limel-example-chip-set
+ * @exampleComponent limel-example-chip-set-basic
  * @exampleComponent limel-example-chip-set-choice
  * @exampleComponent limel-example-chip-set-filter
  * @exampleComponent limel-example-chip-set-filter-badge

src/components/chip-set/examples/chip-set.tsx → src/components/chip-set/examples/chip-set-basic.tsx

@@ -11,7 +11,7 @@ import { Component, h, Host, State } from '@stencil/core';
  * [limel-button-group](#/component/limel-button-group/).
  */
 @Component({
-    tag: 'limel-example-chip-set',
+    tag: 'limel-example-chip-set-basic',
     shadow: true,
 })
 export class ChipSetExample {

src/components/circular-progress/circular-progress.tsx

@@ -22,7 +22,7 @@ const PERCENT = 100;
  * full progress.
  * :::
  *
- * @exampleComponent limel-example-circular-progress
+ * @exampleComponent limel-example-circular-progress-basic
  * @exampleComponent limel-example-circular-progress-sizes
  * @exampleComponent limel-example-circular-progress-props
  * @exampleComponent limel-example-circular-progress-css-variables

src/components/circular-progress/examples/circular-progress.tsx → src/components/circular-progress/examples/circular-progress-basic.tsx

@@ -2,8 +2,8 @@ import { Component, h, State } from '@stencil/core';
 
 @Component({
     shadow: true,
-    tag: 'limel-example-circular-progress',
-    styleUrl: 'circular-progress.scss',
+    tag: 'limel-example-circular-progress-basic',
+    styleUrl: 'circular-progress-basic.scss',
 })
 export class CircularProgressExample {
     @State()

src/components/circular-progress/examples/circular-progress-percentage-colors.tsx

@@ -13,7 +13,7 @@ import { Component, h, State } from '@stencil/core';
 @Component({
     shadow: true,
     tag: 'limel-example-circular-progress-percentage-colors',
-    styleUrl: 'circular-progress.scss',
+    styleUrl: 'circular-progress-basic.scss',
 })
 export class CircularProgressPercentageColorsExample {
     @State()

src/components/circular-progress/examples/circular-progress-props.tsx

@@ -11,7 +11,7 @@ import { Component, h } from '@stencil/core';
 @Component({
     shadow: true,
     tag: 'limel-example-circular-progress-props',
-    styleUrl: 'circular-progress.scss',
+    styleUrl: 'circular-progress-basic.scss',
 })
 export class CircularProgressPropsExample {
     private degree = 45;

src/components/circular-progress/examples/circular-progress-sizes.tsx

@@ -15,7 +15,7 @@ import { Component, h } from '@stencil/core';
 @Component({
     shadow: true,
     tag: 'limel-example-circular-progress-sizes',
-    styleUrl: 'circular-progress.scss',
+    styleUrl: 'circular-progress-basic.scss',
 })
 export class CircularProgressSizesExample {
     private value = 92.6;

src/components/code-editor/code-editor.tsx

@@ -31,7 +31,7 @@ import { Languages } from '../date-picker/date.types';
 type CopyState = 'idle' | 'success' | 'failed';
 
 /**
- * @exampleComponent limel-example-code-editor
+ * @exampleComponent limel-example-code-editor-basic
  * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
  * @exampleComponent limel-example-code-editor-fold-lint-wrap
  * @exampleComponent limel-example-code-editor-copy

src/components/code-editor/examples/code-editor-basic.scss

@@ -0,0 +1,3 @@
+:host {
+    --code-editor-max-height: 20rem;
+}

src/components/code-editor/examples/code-editor.tsx → src/components/code-editor/examples/code-editor-basic.tsx

@@ -10,9 +10,9 @@ import { data } from '../../table/examples/birds';
  */
 
 @Component({
-    tag: 'limel-example-code-editor',
+    tag: 'limel-example-code-editor-basic',
     shadow: true,
-    styleUrl: 'code-editor.scss',
+    styleUrl: 'code-editor-basic.scss',
 })
 export class CodeExample {
     @State()

src/components/dialog/dialog.tsx

@@ -30,7 +30,7 @@ import { createRandomString } from '../../util/random-string';
  * from Lime Web Components to open dialogs in Lime CRM.
  * :::
  *
- * @exampleComponent limel-example-dialog
+ * @exampleComponent limel-example-dialog-basic
  * @exampleComponent limel-example-dialog-nested-close-events
  * @exampleComponent limel-example-dialog-heading
  * @exampleComponent limel-example-dialog-heading-actions

src/components/dialog/examples/dialog.tsx → src/components/dialog/examples/dialog-basic.tsx

@@ -1,7 +1,7 @@
 import { Component, h, State } from '@stencil/core';
 
 @Component({
-    tag: 'limel-example-dialog',
+    tag: 'limel-example-dialog-basic',
     shadow: true,
 })
 export class DialogExample {

src/components/dynamic-label/dynamic-label.tsx

@@ -16,7 +16,7 @@ import { Icon } from '../../interface';
  * provide the best way of _visualizing information_, potentially leading to
  * confusion and negatively affecting the end-users' experience.
  *
- * @exampleComponent limel-example-dynamic-label
+ * @exampleComponent limel-example-dynamic-label-basic
  * @exampleComponent limel-example-dynamic-label-readonly-boolean
  */
 @Component({

src/components/dynamic-label/examples/dynamic-label.tsx → src/components/dynamic-label/examples/dynamic-label-basic.tsx

@@ -7,7 +7,7 @@ import { Component, State, h } from '@stencil/core';
  * while the default label (including its icon) is ignored.
  */
 @Component({
-    tag: 'limel-example-dynamic-label',
+    tag: 'limel-example-dynamic-label-basic',
     shadow: true,
 })
 export class DynamicLabelExample {

src/components/file-dropzone/examples/file-dropzone.tsx → src/components/file-dropzone/examples/file-dropzone-basic.tsx

@@ -5,9 +5,9 @@ import { Component, h, State } from '@stencil/core';
  * Basic example
  */
 @Component({
-    tag: 'limel-example-file-dropzone',
+    tag: 'limel-example-file-dropzone-basic',
     shadow: true,
-    styleUrl: 'file-dropzone.scss',
+    styleUrl: 'file-dropzone-basic.scss',
 })
 export class FileDropzoneExample {
     @State()

src/components/file-dropzone/file-dropzone.tsx

@@ -24,7 +24,7 @@ import { partition } from 'lodash-es';
  * The event detail would be an array of `FileInfo` objects,
  * each representing a file dropped into the dropzone.
  *
- * @exampleComponent limel-example-file-dropzone
+ * @exampleComponent limel-example-file-dropzone-basic
  * @exampleComponent limel-example-file-dropzone-type-filtering
  * @private
  */

src/components/file-input/examples/file-input.tsx → src/components/file-input/examples/file-input-basic.tsx

@@ -5,7 +5,7 @@ import { Component, h, State } from '@stencil/core';
  * Basic example
  */
 @Component({
-    tag: 'limel-example-file-input',
+    tag: 'limel-example-file-input-basic',
     shadow: true,
 })
 export class FileInputExample {

src/components/file-input/file-input.tsx

@@ -24,7 +24,7 @@ import { createFileInfo } from '../../util/files';
  * The event detail would be an array of `FileInfo` objects,
  * each representing a file dropped into the dropzone.
  *
- * @exampleComponent limel-example-file-input
+ * @exampleComponent limel-example-file-input-basic
  * @exampleComponent limel-example-file-input-type-filtering
  * @private
  */

src/components/file/examples/file.tsx → src/components/file/examples/file-basic.tsx

@@ -5,7 +5,7 @@ import { Component, h, State } from '@stencil/core';
  * Basic example
  */
 @Component({
-    tag: 'limel-example-file',
+    tag: 'limel-example-file-basic',
     shadow: true,
 })
 export class FileExample {

src/components/file/file.tsx

@@ -45,7 +45,7 @@ const DEFAULT_FILE_CHIP: Chip = {
  * and similar phrases...
  * :::
  *
- * @exampleComponent limel-example-file
+ * @exampleComponent limel-example-file-basic
  * @exampleComponent limel-example-file-custom-icon
  * @exampleComponent limel-example-file-menu-items
  * @exampleComponent limel-example-file-accepted-types

src/components/header/examples/header.tsx → src/components/header/examples/header-basic.tsx

@@ -11,7 +11,7 @@ import { Component, h } from '@stencil/core';
  */
 
 @Component({
-    tag: 'limel-example-header',
+    tag: 'limel-example-header-basic',
     shadow: true,
 })
 export class HeaderExample {

src/components/header/header.tsx

@@ -42,7 +42,7 @@ import { getIconName } from '../icon/get-icon-props';
  * and take a lot of attention from users.
  * :::
  *
- * @exampleComponent limel-example-header
+ * @exampleComponent limel-example-header-basic
  * @exampleComponent limel-example-header-slot-actions
  * @exampleComponent limel-example-header-colors
  * @exampleComponent limel-example-header-responsive

src/components/help/examples/help.tsx → src/components/help/examples/help-basic.tsx

@@ -21,7 +21,7 @@ const markdown = `
  * providing a richer experience for the user.
  */
 @Component({
-    tag: 'limel-example-help',
+    tag: 'limel-example-help-basic',
     shadow: true,
 })
 export class HelpExample {

src/components/help/help.tsx

@@ -19,7 +19,7 @@ import { Link } from '../../global/shared-types/link.types';
  * of an app more effortlessly, minimizes the learning curve,
  * transforming complex features into accessible opportunities for exploration.
  *
- * @exampleComponent limel-example-help
+ * @exampleComponent limel-example-help-basic
  * @exampleComponent limel-example-read-more
  * @exampleComponent limel-example-open-direction
  * @exampleComponent limel-example-placement

src/components/helper-line/examples/helper-line.tsx → src/components/helper-line/examples/helper-line-basic.tsx

@@ -4,7 +4,7 @@ import { Component, h } from '@stencil/core';
  * Basic example
  */
 @Component({
-    tag: 'limel-example-helper-line',
+    tag: 'limel-example-helper-line-basic',
     shadow: true,
 })
 export class HelperLineExample {

src/components/helper-line/helper-line.tsx

@@ -11,7 +11,7 @@ import { Component, Host, Prop, h } from '@stencil/core';
  * Also this enables us to open the helper line in limel-portal,
  * more easily without having to send the styles to the portal.
  *
- * @exampleComponent limel-example-helper-line
+ * @exampleComponent limel-example-helper-line-basic
  * @exampleComponent limel-example-helper-line-invalid
  * @exampleComponent limel-example-helper-line-long-text
  * @exampleComponent limel-example-helper-line-long-text-no-counter

src/components/info-tile/examples/info-tile.tsx → src/components/info-tile/examples/info-tile-basic.tsx

@@ -24,9 +24,9 @@ import { Component, h } from '@stencil/core';
  * :::
  */
 @Component({
-    tag: 'limel-example-info-tile',
+    tag: 'limel-example-info-tile-basic',
     shadow: true,
-    styleUrl: 'info-tile.scss',
+    styleUrl: 'info-tile-basic.scss',
 })
 export class InfoTileExample {
     public render() {

src/components/info-tile/examples/info-tile-primary-slot.tsx

@@ -17,7 +17,7 @@ import { chartItems } from '../../chart/examples/chart-items-stack';
 @Component({
     tag: 'limel-example-info-tile-primary-slot',
     shadow: true,
-    styleUrl: 'info-tile.scss',
+    styleUrl: 'info-tile-basic.scss',
 })
 export class InfoTilePrimarySlotExample {
     public render() {

src/components/info-tile/info-tile.tsx

@@ -13,7 +13,7 @@ import { getRel } from '../../util/link-helper';
  * a new screen or web page, you need to provide a URL,
  * using the `link` property.
  *
- * @exampleComponent limel-example-info-tile
+ * @exampleComponent limel-example-info-tile-basic
  * @exampleComponent limel-example-info-tile-badge
  * @exampleComponent limel-example-info-tile-progress
  * @exampleComponent limel-example-info-tile-loading

src/components/linear-progress/examples/linear-progress.tsx → src/components/linear-progress/examples/linear-progress-basic.tsx

@@ -10,7 +10,7 @@ const FRACTION = 100;
  */
 @Component({
     shadow: true,
-    tag: 'limel-example-linear-progress',
+    tag: 'limel-example-linear-progress-basic',
 })
 export class LinearProgressExample {
     @State()

src/components/linear-progress/linear-progress.tsx

@@ -8,7 +8,7 @@ const PERCENT = 100;
  * The linear progress component can be used to visualize the current state of a progress in a scale;
  * for example percentage of completion of a task.
  *
- * @exampleComponent limel-example-linear-progress
+ * @exampleComponent limel-example-linear-progress-basic
  * @exampleComponent limel-example-linear-progress-indeterminate
  * @exampleComponent limel-example-linear-progress-accessible-label
  * @exampleComponent limel-example-linear-progress-color

src/components/list/examples/list.tsx → src/components/list/examples/list-basic.tsx

@@ -5,7 +5,7 @@ import { Component, h } from '@stencil/core';
  * Basic list
  */
 @Component({
-    tag: 'limel-example-list',
+    tag: 'limel-example-list-basic',
     shadow: true,
 })
 export class ListExample {

src/components/list/list.tsx

@@ -19,7 +19,7 @@ import { ListRendererConfig } from './list-renderer-config';
 const { ACTION_EVENT } = listStrings;
 
 /**
- * @exampleComponent limel-example-list
+ * @exampleComponent limel-example-list-basic
  * @exampleComponent limel-example-list-secondary
  * @exampleComponent limel-example-list-separator
  * @exampleComponent limel-example-list-icons