@solid-design-system/mcp 7.0.2 → 7.1.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 7.1.0
+
+## 7.0.3
+
 ## 7.0.2
 
 ## 7.0.1

package/metadata/packages/components/sd-datepicker/info.md

@@ -16,6 +16,7 @@ Use the components tool by passing the args `component` and `example` for any of
 - component: sd-datepicker, example: disabled
 - component: sd-datepicker, example: visually-disabled
 - component: sd-datepicker, example: help-text
+- component: sd-datepicker, example: clearable
 - component: sd-datepicker, example: required
 - component: sd-datepicker, example: valid
 - component: sd-datepicker, example: invalid
@@ -56,6 +57,7 @@ Use the components tool by passing the args `component` and `example` for any of
 - prop.visuallyDisabled [attr: visually-disabled]: boolean, default=false — Makes the control non-interactive visually (like disabled) without disabling it functionally.
 - prop.styleOnValid [attr: style-on-valid]: boolean, default=false — When true, applies success styling for valid selections.
 - prop.readonly: boolean, default=false — Makes the input read-only (non-editable) when true.
+- prop.clearable: boolean, default=false — Adds a clear button when the datepicker is not empty.
 - prop.placement: 'top'|'bottom', default='bottom' — Preferred placement of the flyout relative to the input (top|bottom).
 - prop.placeholder: string, default='' — Placeholder text for the input when no date is selected.
 - prop.name: string, default='' — The name of the datepicker, submitted as a name/value pair with form data.
@@ -79,6 +81,7 @@ Use the components tool by passing the args `component` and `example` for any of
 - event.sd-blur: Emitted when the datepicker is blurred.
 - event.sd-month-change: Emitted when the month is changed.
 - event.sd-month-year: Emitted when the year is changed.
+- event.sd-clear: Emitted when the clear button is activated.
 
 ### Slots
 
@@ -86,6 +89,7 @@ Use the components tool by passing the args `component` and `example` for any of
 - slot.label: The label for the date input.
 - slot.help-text: The help text, displayed below the input.
 - slot.tooltip: The tooltip icon and content.
+- slot.clear-icon: An icon to use in lieu of the default clear icon.
 
 ### CSS Parts
 
@@ -106,6 +110,7 @@ Use the components tool by passing the args `component` and `example` for any of
 - part.invalid-icon: The icon shown when the input is invalid.
 - part.valid-icon: The icon shown when the input is valid.
 - part.form-control-help-text: The help text, displayed below the input.
+- part.clear-button: The clear button.
 
 ## Guidelines
 

package/metadata/packages/components/sd-datepicker/stories/clearable.md

@@ -0,0 +1,7 @@
+Use the `clearable` attribute to add a clear button that removes the datepicker value.
+
+```html
+<div class="max-w-[370px] h-[500px]">
+  <sd-datepicker label="Label" value="2026.01.01" clearable></sd-datepicker>
+</div>
+```

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

@@ -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",
@@ -844,16 +844,16 @@
     "displayNameDe": "Lesezeichen",
     "tags": ["merken", "Markierung", "markiert", "Favoriten"]
   },
-  {
-    "technicalId": "flash",
-    "displayNameDe": "Blitz",
-    "tags": ["Pfeil", "Fehler", "falsch"]
-  },
   {
     "technicalId": "arrow-right",
     "displayNameDe": "Pfeil rechts",
     "tags": ["Pfeil", "vorwärts", "weiter"]
   },
+  {
+    "technicalId": "flash",
+    "displayNameDe": "Blitz",
+    "tags": ["Pfeil", "Fehler", "falsch"]
+  },
   {
     "technicalId": "arrow-top",
     "displayNameDe": "Pfeil oben",

package/metadata/packages/templates/file-selector.md

@@ -0,0 +1,266 @@
+---
+name: file-selector
+title: File Selector
+components:
+  - sd-button
+  - sd-divider
+  - sd-file-selector
+  - sd-headline
+  - sd-headline--size-3xl
+  - sd-headline--size-4xl
+  - sd-icon
+  - sd-input
+  - sd-interactive
+  - sd-interactive--reset
+  - sd-meta
+  - sd-meta--light
+  - sd-meta--size-sm
+  - sd-option
+  - sd-paragraph
+  - sd-progress-bar
+  - sd-select
+  - sd-tooltip
+version: 1.0.0
+---
+
+## Template: File Selector with Default variant
+
+```html
+<section>
+  <form id="identity-form" class="flex flex-col gap-6">
+    <div class="flex flex-col gap-2">
+      <h3 class="sd-headline sd-headline--size-4xl">Confirm your identity</h3>
+      <p class="sd-paragraph">
+        To safeguard your account, we need to verify who you are. Choose a document type below and upload a clear scan.
+      </p>
+    </div>
+    <div class="flex flex-col gap-6">
+      <span class="sd-meta sd-meta--size-sm sd-meta--light">Fields marked with * are required.</span>
+      <sd-select name="documentType" label="Document type" placeholder="Please select" required>
+        <sd-option value="passport">Passport</sd-option>
+        <sd-option value="id-card">ID card</sd-option>
+      </sd-select>
+      <sd-file-selector name="identityDocument" label="Upload document" show-label required></sd-file-selector>
+    </div>
+  </form>
+</section>
+```
+
+## Template: File Selector with Drop Area variant
+
+```html
+<section>
+  <form id="droparea-documents-form" class="flex flex-col gap-6">
+    <h3 class="sd-headline sd-headline--size-3xl">Tax Documents &amp; Depot Statements</h3>
+    <p class="sd-paragraph">
+      Please share your tax and depot records for the current year. Digital documents help us provide you with accurate
+      tax reporting services.
+    </p>
+    <div class="flex flex-col">
+      <span class="sd-meta sd-meta--size-sm sd-meta--light">Fields marked with * are required.</span>
+      <sd-file-selector
+        id="droparea-file-selector"
+        name="droparea-file-selector"
+        label="Upload documents"
+        show-label
+        drop-area
+        multiple
+        required
+        accept=".pdf,.jpg,.jpeg,.png"
+        help-text="Maximum file size 3 MB. Supported: PDF, JPG, PNG."
+        class="mt-6"
+      ></sd-file-selector>
+      <ul id="droparea-file-list" class="file-list flex flex-col gap-2 mt-2" aria-live="polite"></ul>
+    </div>
+    <div class="flex flex-col gap-4 md:flex-row md:justify-end">
+      <sd-button variant="secondary" onclick="alert('Cancelled process')">Cancel</sd-button>
+      <sd-tooltip id="droparea-submit-tooltip" trigger="hover focus" content="Please select one or more files.">
+        <sd-button id="droparea-submit-button" type="submit" visually-disabled>Submit documents</sd-button>
+      </sd-tooltip>
+    </div>
+  </form>
+</section>
+<script type="module">
+  await Promise.all([
+    customElements.whenDefined('sd-file-selector'),
+    customElements.whenDefined('sd-progress-bar'),
+    customElements.whenDefined('sd-button'),
+    customElements.whenDefined('sd-icon'),
+    customElements.whenDefined('sd-divider'),
+    customElements.whenDefined('sd-tooltip')
+  ]);
+
+  const MAX_FILE_SIZE = 3 * 1024 * 1024;
+  const ALLOWED_FILE_TYPES = ['application/pdf', 'image/jpeg', 'image/png'];
+  const NO_FILES_MESSAGE = 'Please select one or more files.';
+  const INVALID_FILES_MESSAGE = 'One or more files have errors. Please remove them and try again.';
+  const fileSelector = document.getElementById('droparea-file-selector');
+  const fileList = document.getElementById('droparea-file-list');
+  const submitButton = document.getElementById('droparea-submit-button');
+  const submitTooltip = document.getElementById('droparea-submit-tooltip');
+  let files = [];
+
+  // preview-ignore:start
+  const delay = milliseconds => new Promise(resolve => setTimeout(resolve, milliseconds));
+  const simulateUpload = async (file, progressBar, fileName) => {
+    for (let progress = 0; progress <= 100; progress += 1) {
+      progressBar.value = progress;
+      progressBar.label = 'Uploading ' + file.name + ': ' + progress + '%';
+
+      await delay(50);
+    }
+
+    progressBar.label = file.name + ' uploaded successfully';
+    await delay(300);
+
+    progressBar.remove();
+    fileName.classList.remove('shrink-0', 'text-neutral-700');
+    fileName.classList.add('flex-1', 'text-black');
+  };
+  // preview-ignore:end
+
+  const updateSubmitButtonState = () => {
+    const hasFiles = files.length > 0;
+    const hasInvalidFiles = fileList?.querySelector('li.invalid') !== null;
+    const isDisabled = !hasFiles || hasInvalidFiles;
+
+    submitButton.visuallyDisabled = isDisabled;
+    submitTooltip.disabled = !isDisabled;
+    submitTooltip.content = hasInvalidFiles ? INVALID_FILES_MESSAGE : NO_FILES_MESSAGE;
+  };
+
+  fileSelector.addEventListener('sd-input', event => {
+    fileList?.replaceChildren();
+
+    files = Array.from(event.currentTarget.files ?? []);
+    fileList?.classList.toggle('hidden', files.length === 0);
+
+    files.forEach((file, index) => {
+      const listItem = document.createElement('li');
+      const listRow = document.createElement('div');
+      const fileName = document.createElement('span');
+      const removeButton = document.createElement('button');
+
+      listItem.classList.add('flex', 'flex-col', 'text-sm', 'gap-2', 'text-left');
+      listRow.classList.add('flex', 'items-center', 'gap-2', 'w-full');
+      fileName.classList.add('shrink-0', 'truncate', 'text-neutral-700');
+      fileName.textContent = file.name;
+
+      removeButton.type = 'button';
+      removeButton.classList.add('sd-interactive', 'sd-interactive--reset', 'shrink-0', 'flex', 'items-center');
+      removeButton.title = 'Remove ' + file.name;
+      removeButton.setAttribute('aria-label', 'Remove ' + file.name);
+
+      const trashIcon = document.createElement('sd-icon');
+      trashIcon.setAttribute('name', 'system/trash');
+      trashIcon.setAttribute('color', 'currentColor');
+      trashIcon.setAttribute('aria-hidden', 'true');
+      trashIcon.classList.add('w-4', 'h-4');
+
+      removeButton.append(trashIcon);
+      listRow.append(fileName);
+
+      /**
+       * Client-side validation example.
+       * Files must also be validated by the server.
+       */
+      const errors = [];
+
+      if (!ALLOWED_FILE_TYPES.includes(file.type)) errors.push('Unsupported file type');
+      if (file.size > MAX_FILE_SIZE) errors.push('The file is too large. Maximum allowed size is 3 MB.');
+
+      if (errors.length === 0) {
+        const progressBar = document.createElement('sd-progress-bar');
+
+        progressBar.classList.add('flex-1');
+        progressBar.max = 100;
+        progressBar.value = 0;
+        progressBar.label = 'Uploading ' + file.name + ': 0%';
+
+        listRow.append(progressBar);
+
+        /**
+         * Connect the progress bar to your application's
+         * upload progress here.
+         */
+
+        // preview-ignore:start
+        simulateUpload(file, progressBar, fileName);
+        // preview-ignore:end
+      } else {
+        fileName.classList.add('flex-1');
+      }
+      listRow.append(removeButton);
+      listItem.append(listRow);
+
+      errors.forEach(message => {
+        const errorMessage = document.createElement('div');
+
+        errorMessage.classList.add('flex', 'items-center', 'gap-2', 'text-error', 'text-left', 'text-sm');
+        fileName.classList.remove('text-neutral-700');
+        fileName.classList.add('text-black');
+        errorMessage.setAttribute('role', 'alert');
+
+        const errorIcon = document.createElement('sd-icon');
+        errorIcon.setAttribute('name', 'system/warning');
+        errorIcon.setAttribute('color', 'currentColor');
+        errorIcon.setAttribute('aria-hidden', 'true');
+
+        const errorText = document.createElement('span');
+        errorText.textContent = message;
+
+        errorMessage.append(errorIcon, errorText);
+        listItem.append(errorMessage);
+      });
+
+      removeButton.addEventListener('click', () => {
+        files = files.filter(remainingFile => remainingFile !== file);
+
+        const dataTransfer = new DataTransfer();
+
+        files.forEach(remainingFile => {
+          dataTransfer.items.add(remainingFile);
+        });
+
+        fileSelector.files = dataTransfer.files;
+        listItem.remove();
+
+        const lastListItem = fileList?.querySelector('li:last-child');
+        const lastDivider = lastListItem?.querySelector(':scope > sd-divider');
+
+        lastDivider?.remove();
+        fileList?.classList.toggle('hidden', files.length === 0);
+        updateSubmitButtonState();
+      });
+
+      if (errors.length > 0) listItem.classList.add('invalid');
+
+      if (index < files.length - 1) {
+        const divider = document.createElement('sd-divider');
+        divider.setAttribute('aria-hidden', 'true');
+        listItem.append(divider);
+      }
+
+      fileList?.append(listItem);
+    });
+
+    updateSubmitButtonState();
+  });
+
+  const form = document.getElementById('droparea-documents-form');
+  form.onsubmit = event => {
+    event.preventDefault();
+
+    if (submitButton.visuallyDisabled) {
+      return;
+    }
+
+    if (form.checkValidity()) {
+      alert('Drop area form submitted');
+      return;
+    }
+
+    form.reportValidity();
+  };
+</script>
+```

package/metadata/packages/templates/footnotes.md

@@ -2,12 +2,18 @@
 name: footnotes
 title: Footnotes
 components:
+  - sd-container
+  - sd-container--variant-primary
   - sd-footnotes
+  - sd-footnotes--inverted
   - sd-footnotes--marker
   - sd-headline
-  - sd-headline--3xl
+  - sd-headline--inverted
+  - sd-headline--size-3xl
   - sd-paragraph
+  - sd-paragraph--inverted
   - sd-prose
+  - sd-prose--inverted
 version: 1.0.0
 ---
 
@@ -15,10 +21,7 @@ version: 1.0.0
 
 ```html
 <div class="sd-prose">
-  <!-- Dev-note: The <a> elements have been wrapped in <span> elements due to an issue in safari
-  where using the mouse to navigate between footnotes would trigger the focus-outline. -->
-
-  <h2 class="sd-headline sd-headline--3xl">The Power of a Solid Design System</h2>
+  <h2 class="sd-headline sd-headline--size-3xl">The Power of a Solid Design System</h2>
   <p class="sd-paragraph">
     A solid design system is the backbone of a cohesive product, offering a single source of truth that promotes
     consistency across all platforms and teams
@@ -47,7 +50,7 @@ version: 1.0.0
     increasingly complex. A well-defined design system mitigates these challenges by acting as a blueprint for future
     iterations, preventing visual drift and maintaining brand integrity across diverse touchpoints. Teams can
     confidently experiment and innovate within the system’s boundaries, knowing that their work aligns with established
-    guidelines <span id="ref_4" class="sd-footnotes--marker"><a href="#note_4">3</a></span> .
+    guidelines <span id="ref_4" class="sd-footnotes--marker"><a href="#note_4">4</a></span> .
   </p>
   <p>
     By continuously evolving with feedback and technological advancements, a design system remains a living entity
@@ -60,21 +63,54 @@ version: 1.0.0
 <ol class="sd-footnotes mt-12">
   <li id="note_1">
     <a href="#ref_1" class="sd-footnotes--marker"></a>
-    Design systems act as a "single source of truth," promoting consistency across all products.
+    A design system centralizes guidelines, ensuring consistency across teams and products.
   </li>
   <li id="note_2">
     <a href="#ref_2a" class="sd-footnotes--marker"></a>
     <a href="#ref_2b" class="sd-footnotes--marker"></a>
     <a href="#ref_2c" class="sd-footnotes--marker"></a>
-    Component libraries in design systems streamline workflows, boosting efficiency and scalability.
+    A consistent UI fosters familiarity, trust, and better accessibility for diverse users.
   </li>
   <li id="note_3">
     <a href="#ref_3" class="sd-footnotes--marker"></a>
-    A design system’s consistency helps reinforce brand identity and user trust.
+    Regular updates keep the design system adaptable to new trends and technologies.
   </li>
   <li id="note_4">
     <a href="#ref_4" class="sd-footnotes--marker"></a>
-    Effective design systems evolve, remaining adaptable to product and user needs over time.
+    Standardized components and documentation reduce development time and design inconsistencies.
   </li>
 </ol>
 ```
+
+## Template: Linked Footnotes in Container
+
+```html
+<div class="sd-container sd-container--variant-primary flex flex-col gap-8 max-w-xl">
+  <div class="sd-prose sd-prose--inverted">
+    <h2 class="sd-headline sd-headline--inverted sd-headline--size-3xl">Financing that fits your life</h2>
+    <p class="sd-paragraph sd-paragraph--inverted">
+      A clear loan structure helps customers understand exactly what they're signing up for, before they commit to
+      anything
+      <span id="ref_c_1" class="sd-footnotes--marker sd-footnotes--inverted"><a href="#note_c_1">1</a></span> .
+      Transparent rates, honest fees, and flexible repayment options work together to reduce surprises, helping build
+      long-term trust between the bank and the people it serves.
+    </p>
+    <p class="sd-paragraph sd-paragraph--inverted">
+      Every application is reviewed individually, factoring in income, credit history, and personal financial goals
+      <span id="ref_c_2" class="sd-footnotes--marker sd-footnotes--inverted"><a href="#note_c_2">2</a></span> . This
+      tailored approach means financing decisions reflect each customer's real situation, rather than applying a
+      one-size-fits-all model that ignores individual circumstances.
+    </p>
+  </div>
+  <ol class="sd-footnotes sd-footnotes--inverted flex flex-col gap-2">
+    <li id="note_c_1">
+      <a href="#ref_c_1" class="sd-footnotes--marker"></a>
+      Rates shown are indicative and subject to credit approval.
+    </li>
+    <li id="note_c_2">
+      <a href="#ref_c_2" class="sd-footnotes--marker"></a>
+      Terms may vary based on income and repayment history.
+    </li>
+  </ol>
+</div>
+```

package/package.json

@@ -20,9 +20,9 @@
     "prettier": "^3.9.5",
     "tsx": "^4.23.1",
     "typescript": "^5.9.3",
-    "@solid-design-system/components": "7.0.2",
-    "@solid-design-system/styles": "7.0.2",
-    "@solid-design-system/tokens": "7.0.2"
+    "@solid-design-system/components": "7.1.0",
+    "@solid-design-system/styles": "7.1.0",
+    "@solid-design-system/tokens": "7.1.0"
   },
   "exports": {
     ".": {
@@ -59,7 +59,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "7.0.2",
+  "version": "7.1.0",
   "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",