@sveltia/ui 0.41.3 → 0.42.0

package/dist/components/button/split-button.svelte

@@ -82,21 +82,28 @@
   </MenuButton>
 </div>
 
-<style>.split-button {
-  flex: none;
-  display: inline-flex;
-  margin: var(--sui-focus-ring-width);
-}
-.split-button :global(button) {
-  margin: 0;
-}
-.split-button :global(button.menu-button) {
-  border-inline-start-width: 0;
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-  aspect-ratio: 3/4;
-}
-.split-button :global(button:not(.menu-button)) {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}</style>
+<style lang="scss">
+  .split-button {
+    flex: none;
+    display: inline-flex;
+    margin: var(--sui-focus-ring-width);
+
+    :global {
+      button {
+        margin: 0;
+
+        &.menu-button {
+          border-inline-start-width: 0;
+          border-start-start-radius: 0;
+          border-end-start-radius: 0;
+          aspect-ratio: 3 / 4;
+        }
+
+        &:not(.menu-button) {
+          border-start-end-radius: 0;
+          border-end-end-radius: 0;
+        }
+      }
+    }
+  }
+</style>

package/dist/components/calendar/calendar.svelte

@@ -180,87 +180,110 @@
   </div>
 </div>
 
-<style>[role=group] {
-  display: inline-flex;
-  flex-direction: column;
-  gap: 8px;
-  -webkit-user-select: none;
-  user-select: none;
-  cursor: default;
-}
-[role=group] > * {
-  flex: none;
-}
+<style lang="scss">
+  [role='group'] {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 8px;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: default;
 
-:is(.header, .footer) {
-  display: flex;
-  gap: 8px;
-  height: 24px;
-  align-items: center;
-}
-:is(.header, .footer) :global(button.secondary) {
-  width: 100px;
-  flex: auto;
-}
+    & > * {
+      flex: none;
+    }
+  }
 
-.grid {
-  display: grid !important;
-  grid-template-columns: repeat(auto-fill, 24px);
-  gap: 2px;
-  width: 180px;
-}
-.grid div {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 24px;
-  height: 24px;
-  font-size: var(--sui-font-size-small);
-}
-.grid div.weekday {
-  color: var(--sui-secondary-foreground-color);
-}
-.grid div.other-month {
-  color: var(--sui-tertiary-foreground-color);
-}
-.grid div :global(.today) :global(button) {
-  color: var(--sui-highlight-foreground-color);
-  background-color: var(--sui-primary-accent-color);
-}
-.grid div :global(button) {
-  justify-content: center;
-  margin: 0 !important;
-  width: 100%;
-  height: 24px;
-  border-radius: 50%;
-}
-.grid div :global(button:hover) {
-  background-color: var(--sui-hover-background-color);
-}
-.grid div :global(button:focus) {
-  border-width: 1px;
-  border-color: var(--sui-primary-accent-color-light);
-}
+  :is(.header, .footer) {
+    display: flex;
+    gap: 8px;
+    height: 24px;
+    align-items: center;
 
-.footer :global(button) {
-  font-size: var(--sui-font-size-small);
-}
+    :global {
+      button.secondary {
+        width: 100px;
+        flex: auto;
+      }
+    }
+  }
 
-.popup-inner {
-  display: flex;
-  gap: 8px;
-  padding: 8px;
-}
-.popup-inner [role=group] {
-  gap: 0;
-}
-.popup-inner [role=group] .header {
-  justify-content: center;
-}
-.popup-inner .grid {
-  grid-template-columns: repeat(auto-fill, 48px);
-  width: 98px;
-}
-.popup-inner .grid > div {
-  width: 48px;
-}</style>
+  .grid {
+    display: grid !important;
+    grid-template-columns: repeat(auto-fill, 24px);
+    gap: 2px;
+    width: 180px;
+
+    div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 24px;
+      height: 24px;
+      font-size: var(--sui-font-size-small);
+
+      &.weekday {
+        color: var(--sui-secondary-foreground-color);
+      }
+
+      &.other-month {
+        color: var(--sui-tertiary-foreground-color);
+      }
+
+      :global {
+        &.today button {
+          color: var(--sui-highlight-foreground-color);
+          background-color: var(--sui-primary-accent-color);
+        }
+
+        button {
+          justify-content: center;
+          margin: 0 !important;
+          width: 100%;
+          height: 24px;
+          border-radius: 50%;
+
+          &:hover {
+            background-color: var(--sui-hover-background-color);
+          }
+
+          &:focus {
+            border-width: 1px;
+            border-color: var(--sui-primary-accent-color-light);
+          }
+        }
+      }
+    }
+  }
+
+  .footer {
+    :global {
+      button {
+        font-size: var(--sui-font-size-small);
+      }
+    }
+  }
+
+  .popup-inner {
+    display: flex;
+    gap: 8px;
+    padding: 8px;
+
+    [role='group'] {
+      gap: 0;
+
+      .header {
+        justify-content: center;
+      }
+    }
+
+    .grid {
+      grid-template-columns: repeat(auto-fill, 48px);
+      width: calc(48px * 2 + 2px);
+
+      & > div {
+        width: 48px;
+      }
+    }
+  }
+</style>

package/dist/components/checkbox/checkbox-group.svelte

@@ -15,6 +15,7 @@
    * @property {boolean} [disabled] Whether to disable the widget. An alias of the `aria-disabled`
    * attribute.
    * @property {'horizontal'|'vertical'} [orientation] Orientation of the widget.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
    * @property {Snippet} [children] Primary slot content.
    */
 
@@ -27,6 +28,7 @@
     hidden = false,
     disabled = false,
     orientation = 'horizontal',
+    ariaLabel = undefined,
     children,
     ...restProps
     /* eslint-enable prefer-const */
@@ -41,30 +43,34 @@
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-roledescription="checkbox group"
+  aria-label={ariaLabel}
 >
   <div role="none" class="inner" inert={disabled}>
     {@render children?.()}
   </div>
 </div>
 
-<style>.checkbox-group {
-  display: inline-flex;
-}
-.checkbox-group.horizontal {
-  gap: 8px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.checkbox-group.vertical {
-  gap: 4px;
-  flex-direction: column;
-}
-@media (pointer: coarse) {
-  .checkbox-group.vertical {
-    gap: 8px;
+<style lang="scss">
+  .checkbox-group {
+    display: inline-flex;
+
+    &.horizontal {
+      gap: 8px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    &.vertical {
+      gap: 4px;
+      flex-direction: column;
+
+      @media (pointer: coarse) {
+        gap: 8px;
+      }
+    }
   }
-}
 
-.inner {
-  display: contents;
-}</style>
+  .inner {
+    display: contents;
+  }
+</style>

package/dist/components/checkbox/checkbox-group.svelte.d.ts

@@ -23,6 +23,10 @@ declare const CheckboxGroup: import("svelte").Component<{
      * Orientation of the widget.
      */
     orientation?: "horizontal" | "vertical" | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -47,6 +51,10 @@ type Props = {
      * Orientation of the widget.
      */
     orientation?: "horizontal" | "vertical" | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/checkbox/checkbox.svelte

@@ -24,7 +24,7 @@
    * @property {boolean | 'mixed'} [checked] Whether to check the widget. An alias of the
    * `aria-checked` attribute.
    * @property {string} [label] Text label displayed next to the checkbox.
-   * @property {string} [aria-label] `aria-label` attribute.
+   * @property {string} [ariaLabel] `aria-label` attribute.
    * @property {Snippet} [checkIcon] Check icon slot content.
    * @property {string[]} [group] The two-way bound variable to manage the state of a group of
    * checkboxes. It works in the same way as the [`<input
@@ -46,7 +46,7 @@
     required = false,
     invalid = false,
     label = undefined,
-    'aria-label': ariaLabel,
+    ariaLabel = undefined,
     group = $bindable(),
     onChange,
     children,
@@ -157,66 +157,94 @@
   </div>
 </div>
 
-<style>.checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  margin: var(--sui-focus-ring-width);
-  color: var(--sui-control-foreground-color);
-  font-family: var(--sui-control-font-family);
-  font-size: var(--sui-control-font-size);
-  line-height: var(--sui-control-line-height);
-  cursor: pointer;
-  -webkit-user-select: none;
-  user-select: none;
-}
-.checkbox:hover :global(button) {
-  background-color: var(--sui-hover-background-color);
-}
-.checkbox:hover :global(button[aria-checked=true]) {
-  background-color: var(--sui-primary-accent-color-light);
-}
-.checkbox:active :global(button) {
-  background-color: var(--sui-active-background-color);
-}
-.checkbox:active :global(button[aria-checked=true]) {
-  background-color: var(--sui-primary-accent-color-dark);
-}
-.checkbox :global(button) {
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  margin: 0 !important;
-  border-width: var(--sui-checkbox-border-width, 1.5px);
-  border-color: var(--sui-checkbox-border-color);
-  border-radius: var(--sui-checkbox-border-radius);
-  padding: 0;
-  width: var(--sui-checkbox-height);
-  height: var(--sui-checkbox-height);
-  color: var(--sui-primary-accent-text-color);
-  background-color: var(--sui-checkbox-background-color);
-  transition: all 200ms;
-}
-.checkbox :global(button[aria-checked=true]) {
-  border-color: var(--sui-checkbox-border-color-checked, var(--sui-primary-accent-color));
-  color: var(--sui-checkbox-foreground-color-checked, var(--sui-primary-accent-color-inverted));
-  background-color: var(--sui-checkbox-background-color-checked, var(--sui-primary-accent-color));
-}
-.checkbox :global(button[aria-invalid=true]) {
-  border-color: var(--sui-error-border-color);
-  color: var(--sui-error-foreground-color);
-}
-.checkbox :global(button[aria-checked=true][aria-invalid=true]) {
-  background-color: var(--sui-checkbox-background-color);
-}
-.checkbox :global(button) :global(.icon) {
-  font-size: calc(var(--sui-checkbox-height) - 2px);
-}
-.checkbox label {
-  cursor: inherit;
-}
-
-.inner {
-  display: contents;
-}</style>
+<style lang="scss">
+  .checkbox {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    margin: var(--sui-focus-ring-width);
+    color: var(--sui-control-foreground-color);
+    font-family: var(--sui-control-font-family);
+    font-size: var(--sui-control-font-size);
+    line-height: var(--sui-control-line-height);
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+
+    &:hover {
+      :global {
+        button {
+          background-color: var(--sui-hover-background-color);
+
+          &[aria-checked='true'] {
+            background-color: var(--sui-primary-accent-color-light);
+          }
+        }
+      }
+    }
+
+    &:active {
+      :global {
+        button {
+          background-color: var(--sui-active-background-color);
+
+          &[aria-checked='true'] {
+            background-color: var(--sui-primary-accent-color-dark);
+          }
+        }
+      }
+    }
+
+    :global {
+      button {
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        margin: 0 !important;
+        border-width: var(--sui-checkbox-border-width, 1.5px);
+        border-color: var(--sui-checkbox-border-color);
+        border-radius: var(--sui-checkbox-border-radius);
+        padding: 0;
+        width: var(--sui-checkbox-height);
+        height: var(--sui-checkbox-height);
+        color: var(--sui-primary-accent-text-color);
+        background-color: var(--sui-checkbox-background-color);
+        transition: all 200ms;
+
+        &[aria-checked='true'] {
+          border-color: var(--sui-checkbox-border-color-checked, var(--sui-primary-accent-color));
+          color: var(
+            --sui-checkbox-foreground-color-checked,
+            var(--sui-primary-accent-color-inverted)
+          );
+          background-color: var(
+            --sui-checkbox-background-color-checked,
+            var(--sui-primary-accent-color)
+          );
+        }
+
+        &[aria-invalid='true'] {
+          border-color: var(--sui-error-border-color);
+          color: var(--sui-error-foreground-color);
+        }
+
+        &[aria-checked='true'][aria-invalid='true'] {
+          background-color: var(--sui-checkbox-background-color);
+        }
+
+        .icon {
+          font-size: calc(var(--sui-checkbox-height) - 2px);
+        }
+      }
+    }
+
+    label {
+      cursor: inherit;
+    }
+  }
+
+  .inner {
+    display: contents;
+  }
+</style>

package/dist/components/checkbox/checkbox.svelte.d.ts

@@ -36,7 +36,7 @@ declare const Checkbox: import("svelte").Component<ButtonProps & import("../../t
     /**
      * `aria-label` attribute.
      */
-    "aria-label"?: string | undefined;
+    ariaLabel?: string | undefined;
     /**
      * Check icon slot content.
      */
@@ -75,7 +75,7 @@ type Props = {
     /**
      * `aria-label` attribute.
      */
-    "aria-label"?: string | undefined;
+    ariaLabel?: string | undefined;
     /**
      * Check icon slot content.
      */