npm - @solid-design-system/mcp - Versions diffs - 7.0.0-next.2 → 7.0.0-next.4 - Mend

@solid-design-system/mcp 7.0.0-next.2 → 7.0.0-next.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,7 +1,15 @@
 # Changelog
+## 7.0.0-next.4
+## 7.0.0-next.3
 ## 7.0.0-next.2
+## 6.29.0
+## 6.28.2
 ### Patch Changes
 - Updated dependencies. See details in the Pull Request _[`#3163`](https://github.com/solid-design-system/solid/pull/3163) [`91ff1c8`](https://github.com/solid-design-system/solid/commit/91ff1c81831fb3522c534306a61b8a5be3562f64) [@rahulsuvarna18](https://github.com/rahulsuvarna18)_

package/metadata/packages/components/docs/usage.md CHANGED Viewed

@@ -94,10 +94,10 @@ Custom elements cannot have self-closing tags. Similar to `<script>` and `<texta
 ```html
 <!-- Don't do this -->
-<sd-spinner />
+<sd-button />
 <!-- Always do this -->
-<sd-spinner></sd-spinner>
+<sd-button></sd-button>
 ```
 ### Differences from Native Elements
@@ -142,10 +142,10 @@ A way to use this method is to hide the `<body>` with `opacity: 0` and add a cla
   await Promise.allSettled([
     customElements.whenDefined('sd-button'),
     customElements.whenDefined('sd-icon'),
-    customElements.whenDefined('sd-spinner')
+    customElements.whenDefined('sd-loader')
   ]);
-  // Button, icon and spinner are registered now! Add
+  // Button, icon and loader are registered now! Add
   // the `ready` class so the UI fades in.
   document.body.classList.add('ready');
 </script>

package/metadata/packages/components/sd-brandshape/info.md CHANGED Viewed

@@ -15,7 +15,7 @@ Use the components tool by passing the args `component` and `example` for any of
 ### Key Properties
-- prop.variant: |'neutral-100'|'primary'|'white'|'border-primary'|'border-white'|'primary|80'|'white|80'|'image', default='primary' — The brandshape's theme variant.
+- prop.variant: 'neutral-100'|'primary'|'white'|'border-primary'|'border-white'|'primary|80'|'white|80'|'image', default='primary' — The brandshape's theme variant.
 - prop.shapes: ('top'|'middle'|'bottom')[], default=['top', 'middle', 'bottom'] — Defines which shapes of the brandshape should be displayed.
 - prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
 - prop.lang: string — The element's language.

package/metadata/packages/components/sd-input/info.md CHANGED Viewed

@@ -33,10 +33,10 @@ Use the components tool by passing the args `component` and `example` for any of
 ### Key Properties
-- prop.type: |'date'|'datetime-local'|'email'|'number'|'password'|'search'|'tel'|'text'|'time'|'url', default='text' — The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults
+- prop.type: 'date'|'datetime-local'|'email'|'number'|'password'|'search'|'tel'|'text'|'time'|'url', default='text' — The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults
   to `text`.
 - prop.size: 'lg'|'md'|'sm', default='lg' — The input's size.
-- prop.inputmode: |'none'|'text'|'decimal'|'numeric'|'tel'|'search'|'email'|'url' — Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
+- prop.inputmode: 'none'|'text'|'decimal'|'numeric'|'tel'|'search'|'email'|'url' — Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
   keyboard on supportive devices.
 - prop.value: string, default='' — The current value of the input, submitted as a name/value pair with form data.
 - prop.defaultValue: string, default='' — The default value of the form control. Primarily used for resetting the form control.
@@ -64,11 +64,12 @@ Use the components tool by passing the args `component` and `example` for any of
 - prop.pattern: string — A regular expression pattern to validate input against.
 - prop.step: number|'any' — Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
   implied, allowing any numeric value. Only applies to date and number input types.
-- prop.autocapitalize: |'off'|'none'|'on'|'sentences'|'words'|'characters' — Controls whether and how text input is automatically capitalized as it is entered by the user.
+- prop.autocapitalize: 'off'|'none'|'on'|'sentences'|'words'|'characters' — Controls whether and how text input is automatically capitalized as it is entered by the user.
+- prop.autocorrect: boolean — Indicates whether the browser's autocorrect feature is on or off.
 - prop.autocomplete: string — Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
   [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
 - prop.autofocus: boolean — Indicates that the input should receive focus on page load.
-- prop.enterkeyhint: |'enter'|'done'|'go'|'next'|'previous'|'search'|'send' — Used to customize the label or icon of the Enter key on virtual keyboards.
+- prop.enterkeyhint: 'enter'|'done'|'go'|'next'|'previous'|'search'|'send' — Used to customize the label or icon of the Enter key on virtual keyboards.
 - prop.styleOnValid [attr: style-on-valid]: boolean, default=false — Shows success styles if the validity of the input is valid.
 - prop.spellcheck: boolean, default=true — Enables spell checking on the input.
 - prop.valueAsDate: — Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted.

package/metadata/packages/components/sd-popup/info.md CHANGED Viewed

@@ -19,7 +19,7 @@
 - prop.arrow: boolean, default=false — Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and
   `--arrow-color` custom properties. For additional customizations, you can also target the arrow using
   `::part(arrow)` in your stylesheet.
-- prop.arrowPlacement [attr: arrow-placement]: |'start'|'end'|'center'|'anchor', default='anchor' — The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the
+- prop.arrowPlacement [attr: arrow-placement]: 'start'|'end'|'center'|'anchor', default='anchor' — The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the
   anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will
   align the arrow to the start, end, or center of the popover instead.
 - prop.arrowPadding [attr: arrow-padding]: number, default=10 — The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,

package/metadata/packages/components/sd-range/info.md CHANGED Viewed

@@ -24,7 +24,7 @@ Use the components tool by passing the args `component` and `example` for any of
 - prop.disabled: boolean, default=false — Disables the range.
 - prop.visuallyDisabled [attr: visually-disabled]: boolean, default=false — Disables the range visually.
 - prop.noTrackBar [attr: no-track-bar]: boolean, default=false — Disables the active track bar.
-- prop.tooltip: |'on-interaction'|'hidden'|'always-visible', default='on-interaction' — Defines the thumbs tooltip behaviour.
+- prop.tooltip: 'on-interaction'|'hidden'|'always-visible', default='on-interaction' — Defines the thumbs tooltip behaviour.
 - prop.defaultValue: string, default='' — The default value of the form control. Primarily used for resetting the form control.
 - prop.value: — The current values of the input (in ascending order) as a string of space separated values
 - prop.valueAsArray: — Gets or sets the current values of the range as an array of numbers

package/metadata/packages/components/sd-teaser/info.md CHANGED Viewed

@@ -19,7 +19,7 @@ Use the components tool by passing the args `component` and `example` for any of
 ### Key Properties
-- prop.variant: |'white'|'white border-neutral-400'|'neutral-100'|'primary'|'primary-100', default='white' — Variant of the teaser
+- prop.variant: 'white'|'white border-neutral-400'|'neutral-100'|'primary'|'primary-100', default='white' — Variant of the teaser
 - prop.breakpoint: number, default=448 — Breakpoint where the teaser switches from `vertical` to `horizontal`. `0` is always `horizontal`, `9999` is always `vertical`.
 - prop.inset: boolean, default=false — The teaser's inner padding. This is always set in `white border-neutral-400`.
 - prop.reversedLayout [attr: reversed-layout]: boolean, default=false — Reverses the layout in horizontal variant

package/metadata/packages/components/sd-teaser-media/info.md CHANGED Viewed

@@ -15,7 +15,7 @@ Use the components tool by passing the args `component` and `example` for any of
 ### Key Properties
-- prop.variant: |'white'|'neutral-100'|'primary'|'primary-100'|'gradient-light'|'gradient-dark', default='white' — Variant of the teaser
+- prop.variant: 'white'|'neutral-100'|'primary'|'primary-100'|'gradient-light'|'gradient-dark', default='white' — Variant of the teaser
 - prop.open: boolean, default=false — Controls whether the expandable content is visible
 - prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
 - prop.lang: string — The element's language.

package/metadata/packages/components/sd-textarea/info.md CHANGED Viewed

@@ -43,12 +43,12 @@ Use the components tool by passing the args `component` and `example` for any of
 - prop.floatingLabel [attr: floating-label]: boolean, default=false — Enables the floating label behavior for the input.
 - prop.minlength: number — The minimum length of input that will be considered valid.
 - prop.maxlength: number — The maximum length of input that will be considered valid.
-- prop.autocapitalize: |'off'|'none'|'on'|'sentences'|'words'|'characters' — Controls whether and how text input is automatically capitalized as it is entered by the user.
-- prop.autocorrect: 'off'|'on' — Indicates whether the browser's autocorrect feature is on or off.
+- prop.autocapitalize: 'off'|'none'|'on'|'sentences'|'words'|'characters' — Controls whether and how text input is automatically capitalized as it is entered by the user.
+- prop.autocorrect: boolean — Indicates whether the browser's autocorrect feature is on or off.
 - prop.autocomplete: string — Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
   [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
 - prop.autofocus: boolean — Indicates that the input should receive focus on page load.
-- prop.enterkeyhint: |'enter'|'done'|'go'|'next'|'previous'|'search'|'send' — Used to customize the label or icon of the Enter key on virtual keyboards.
+- prop.enterkeyhint: 'enter'|'done'|'go'|'next'|'previous'|'search'|'send' — Used to customize the label or icon of the Enter key on virtual keyboards.
 - prop.styleOnValid [attr: style-on-valid]: boolean, default=false — Shows success styles if the validity of the input is valid.
 - prop.spellcheck: boolean, default=true — Enables spell checking on the textarea.
 - prop.inputmode: 'none'|'text' — Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual

package/metadata/packages/components/sd-tooltip/info.md CHANGED Viewed

@@ -20,7 +20,7 @@ Use the components tool by passing the args `component` and `example` for any of
 - prop.size: 'lg'|'sm', default='lg' — Sets the size of the default trigger icon.
 - prop.content: string, default='' — The tooltip's content. If you need to display HTML, use the `content` slot instead.
-- prop.placement: |'top'|'top-start'|'top-end'|'bottom'|'bottom-start'|'bottom-end', default='top' — The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
+- prop.placement: 'top'|'top-start'|'top-end'|'bottom'|'bottom-start'|'bottom-end', default='top' — The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
   inside of the viewport.
 - prop.disabled: boolean, default=false — Disables the tooltip so it won't show when triggered.
 - prop.open: boolean, default=false — Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.

package/metadata/packages/icons/default/system.json CHANGED Viewed

@@ -29,16 +29,16 @@
     "displayNameDe": "Sonne",
     "tags": ["sonnig", "hell", "schönes Wetter"]
   },
-  {
-    "technicalId": "settings",
-    "displayNameDe": "Einstellungen",
-    "tags": ["anpassen", "Bearbeitung", "Zahnrad"]
-  },
   {
     "technicalId": "volume",
     "displayNameDe": "Lautstärke",
     "tags": ["Ton", "Pegel", "Geräuschpegel"]
   },
+  {
+    "technicalId": "settings",
+    "displayNameDe": "Einstellungen",
+    "tags": ["anpassen", "Bearbeitung", "Zahnrad"]
+  },
   {
     "technicalId": "hand",
     "displayNameDe": "Hand",
@@ -79,16 +79,16 @@
     "displayNameDe": "Herz voll",
     "tags": ["Favoriten", "gespeichert", "gemerkt"]
   },
-  {
-    "technicalId": "flash-on",
-    "displayNameDe": "Blitz an",
-    "tags": ["Taschenlampe an", "Foto"]
-  },
   {
     "technicalId": "battery-full",
     "displayNameDe": "Batterie voll\n",
     "tags": ["voll", "Akku", "Ladestatus"]
   },
+  {
+    "technicalId": "flash-on",
+    "displayNameDe": "Blitz an",
+    "tags": ["Taschenlampe an", "Foto"]
+  },
   {
     "technicalId": "sort-down",
     "displayNameDe": "sortieren absteigend",
@@ -314,16 +314,16 @@
     "displayNameDe": "einklappen unten",
     "tags": ["verstecken", "komprimieren", "Seitenleiste"]
   },
-  {
-    "technicalId": "shopping-cart",
-    "displayNameDe": "Einkaufswagen",
-    "tags": ["Onlineshop", "Warenkorb", "Erwerb", "Einkauf"]
-  },
   {
     "technicalId": "bug",
     "displayNameDe": "Fehler",
     "tags": ["Mangel", "Problem"]
   },
+  {
+    "technicalId": "shopping-cart",
+    "displayNameDe": "Einkaufswagen",
+    "tags": ["Onlineshop", "Warenkorb", "Erwerb", "Einkauf"]
+  },
   {
     "technicalId": "eraser",
     "displayNameDe": "Radiergummi",
@@ -614,26 +614,26 @@
     "displayNameDe": "Bildschirm Cursor",
     "tags": ["klicken", "auswählen"]
   },
-  {
-    "technicalId": "file-read-out",
-    "displayNameDe": "Dokument vorlesen",
-    "tags": ["vorlesen", "Audio", "Lautstärke"]
-  },
   {
     "technicalId": "layers",
     "displayNameDe": "Ebenen",
     "tags": ["gruppieren", "Stapel", "mehrere Folien erzeugen"]
   },
   {
-    "technicalId": "file-wai",
-    "displayNameDe": "Dokument wAI",
-    "tags": ["Dokument", "Datei", "wAI"]
+    "technicalId": "file-read-out",
+    "displayNameDe": "Dokument vorlesen",
+    "tags": ["vorlesen", "Audio", "Lautstärke"]
   },
   {
     "technicalId": "collapse-left",
     "displayNameDe": "einklappen links",
     "tags": ["komprimieren", "verstecken", "Seitenleiste"]
   },
+  {
+    "technicalId": "file-wai",
+    "displayNameDe": "Dokument wAI",
+    "tags": ["Dokument", "Datei", "wAI"]
+  },
   {
     "technicalId": "download",
     "displayNameDe": "Download",
@@ -1084,16 +1084,16 @@
     "displayNameDe": "Textmarker",
     "tags": ["hervorheben", "malen", "farbig", "wichtig"]
   },
-  {
-    "technicalId": "e-mail-forward",
-    "displayNameDe": "E-Mail weiterleiten",
-    "tags": ["Pfeil", "weiterleiten", "Brief"]
-  },
   {
     "technicalId": "arrow-top-left",
     "displayNameDe": "Pfeil links oben",
     "tags": ["zurück", "oben", "rückwärts"]
   },
+  {
+    "technicalId": "e-mail-forward",
+    "displayNameDe": "E-Mail weiterleiten",
+    "tags": ["Pfeil", "weiterleiten", "Brief"]
+  },
   {
     "technicalId": "external-link",
     "displayNameDe": "externer Link",

package/metadata/packages/templates/table.md CHANGED Viewed

@@ -835,18 +835,20 @@ version: 1.0.0
                 sortData[columnIndex] === 'none' || !header.sortable ? undefined : 'ascending'
               )}
             >
-              ${header.sortable
-                ? html` <button
-                    class="sd-interactive flex items-center gap-1"
-                    @click="${() => sortTable(columnIndex)}"
-                  >
-                    ${header.label}<sd-icon
-                      id="sortIcon-${columnIndex}"
-                      name=${sortData[columnIndex] === 'none' ? 'system/sort-down' : 'system/sort-down-filled'}
-                      class="text-[12px]"
-                    ></sd-icon>
-                  </button>`
-                : header.label}
+              ${
+                header.sortable
+                  ? html` <button
+                      class="sd-interactive flex items-center gap-1"
+                      @click="${() => sortTable(columnIndex)}"
+                    >
+                      ${header.label}<sd-icon
+                        id="sortIcon-${columnIndex}"
+                        name=${sortData[columnIndex] === 'none' ? 'system/sort-down' : 'system/sort-down-filled'}
+                        class="text-[12px]"
+                      ></sd-icon>
+                    </button>`
+                  : header.label
+              }
             </th>`;
           })}
         </tr>`;

package/package.json CHANGED Viewed

@@ -20,9 +20,9 @@
     "prettier": "^3.9.5",
     "tsx": "^4.23.1",
     "typescript": "^5.9.3",
-    "@solid-design-system/components": "7.0.0-next.2",
-    "@solid-design-system/styles": "7.0.0-next.2",
-    "@solid-design-system/tokens": "7.0.0-next.2"
+    "@solid-design-system/components": "7.0.0-next.4",
+    "@solid-design-system/styles": "7.0.0-next.4",
+    "@solid-design-system/tokens": "7.0.0-next.4"
   },
   "exports": {
     ".": {
@@ -59,7 +59,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "7.0.0-next.2",
+  "version": "7.0.0-next.4",
   "scripts": {
     "build": "pnpm run build:components && pnpm run build:tokens && pnpm run build:ts && pnpm run build:metadata && cd ../.. && pnpm exec prettier --write --log-level warn packages/mcp/metadata",
     "build:components": "cd ../components && pnpm exec node scripts/make-metadata.js --outdir dist",

package/metadata/packages/components/sd-spinner/info.md DELETED Viewed

@@ -1,53 +0,0 @@
-## Overview
-`<sd-spinner>` — Used as a visual indicator with a looping animation that shows loading is in process.
-## API
-### Examples
-Use the components tool by passing the args `component` and `example` for any of these combinations:
-- component: sd-spinner, example: variants
-- component: sd-spinner, example: size
-### Key Properties
-- prop.color: 'primary'|'white'|'currentColor', default='currentColor' — The color color of the spinner.
-- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
-- prop.lang: string — The element's language.
-## Guidelines
-### Use Cases
-- Indicate that content is being loaded, such as when fetching data from a server or loading a new page.
-- Show ongoing background processes, like file uploads or data processing tasks.
-- Used within buttons or interactive elements to indicate that an action is being processed.
-- Apply to sections of a page that are loading independently, such as widgets or panels.
-- Display when a form is being submitted to show that the submission is in progress.
-### Rules
-### Content
-- Include a label or message to provide context about what is being loaded, especially if the loading time is long.
-### Behavior and Placement
-- Use for processes that take a short amount of time (typically under 4 seconds).
-- Apply within specific sections rather than blocking the entire page, unless absolutely necessary.
-- Place in a consistent location relative to the content it is loading.
-### Styling
-- Maintain consistency in size and style; avoid using spinners of varying sizes on the same page.
-### Background
-- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
-### Accessibility
-- Assign role="status" or use a live region (e.g., aria-live="polite") to inform screen reader users of ongoing loading.
-- A spinner shouldn’t itself be focusable or interactive, nor prevent from navigating to other parts of the page while loading continues.

package/metadata/packages/components/sd-spinner/stories/size.md DELETED Viewed

@@ -1,15 +0,0 @@
-Use the CSS property `font-size` to scale the spinner proportionally.
-```html
-<div class="flex flex-row gap-12">
-  <div style="font-size: inherit">
-    <sd-spinner color="primary"></sd-spinner>
-  </div>
-  <div style="font-size: 2rem">
-    <sd-spinner color="primary"></sd-spinner>
-  </div>
-  <div style="font-size: 4rem">
-    <sd-spinner color="primary"></sd-spinner>
-  </div>
-</div>
-```

package/metadata/packages/components/sd-spinner/stories/variants.md DELETED Viewed

@@ -1,43 +0,0 @@
-<sd-notification variant="warning" open class="mb-4">**Warning:** The `sd-spinner` will be deprecated in the future. Please use the `sd-loader` component instead.</sd-notification>
-**Known browser issues:**
-- The 'sd-spinner' component may experience spinner animation issues in Safari, causing them to appear wobbly.
-  /
-  export default {
-  title: 'Components/sd-spinner',
-  component: 'sd-spinner',
-  tags: ['!dev', 'autodocs'],
-  args: overrideArgs({ type: 'attribute', name: 'color', value: 'primary' }),
-  argTypes,
-  parameters: {
-  ...parameters,
-  design: {
-  type: 'figma',
-  url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2115-17681&node-type=section&t=5PpAC3TA3kYF7ufX-0'
-  }
-  }
-  };
-  export const Default = {
-  render: (args: any) => {
-  return generateTemplate({ args });
-  }
-  };
-  /**
-  Use the `color` attribute to set the spinner's color:
-- `currentColor` (default): used to inherit the `text-color` from the parent element
-- `primary`: used on light backgrounds
-- `white`: used on primary backgrounds
-```html
-<div class="flex flex-row items-center gap-12">
-  <div class="p-4">
-    <sd-spinner color="currentColor"></sd-spinner>
-  </div>
-  <div class="p-4">
-    <sd-spinner color="primary"></sd-spinner>
-  </div>
-  <div class="bg-primary p-4">
-    <sd-spinner color="white"></sd-spinner>
-  </div>
-</div>
-```