@solid-design-system/mcp 7.0.3 → 7.1.0

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## 7.1.0
+
 ## 7.0.3
 
 ## 7.0.2

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/package.json

@@ -20,9 +20,9 @@
     "prettier": "^3.9.5",
     "tsx": "^4.23.1",
     "typescript": "^5.9.3",
-    "@solid-design-system/components": "7.0.3",
-    "@solid-design-system/styles": "7.0.3",
-    "@solid-design-system/tokens": "7.0.3"
+    "@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.3",
+  "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",