@filipgutica/ui 1.14.1 → 1.16.0

package/README.md

@@ -121,8 +121,9 @@ Bind `aria-current="location"` to the link whose section matches the value.
 ## Project sites
 
 The `site` entry gives the project sites one header, one appearance choice, and
-shared page styles. Import `@filipgutica/ui/site.css` and the Graphite Indigo
-theme above, which supplies the type and spacing roles `site.css` reads. Keep
+shared page styles. Import `@filipgutica/ui/components.css`,
+`@filipgutica/ui/site.css`, and the Graphite Indigo theme above, which supplies
+the type and spacing roles `site.css` reads. Keep
 document-wide link styles in `@layer base` so the header owns its navigation
 appearance.
 
@@ -143,9 +144,10 @@ import { UiSiteHeader } from '@filipgutica/ui/site'
 menu is a native disclosure that works without JavaScript; Escape closes it and
 returns focus to its button. Inside `.fg-site-docs`, at 640px and below, the
 header hides `links` so it fits one row, so repeat those destinations in the footer. Without a
-default slot the header renders a System, Light, and Dark picker. A page with its own appearance control passes it
-in the default slot and uses `useSiteAppearance({ applyToRoot: false })` when it
-owns the root element.
+default slot the header renders a System, Light, and Dark picker, built on
+`UiSegmentedControl`. A page with its own appearance control passes it in the
+default slot and uses `useSiteAppearance({ applyToRoot: false })` when it owns
+the root element.
 
 `useSiteAppearance()` returns `choice`, the resolved `appearance`, and
 `chooseAppearance(value)`. The choice is stored under `tool-site-theme`, follows

package/dist/components/UiSegmentedControl.vue.d.ts

@@ -0,0 +1,42 @@
+import type { UiControlSize } from '../control.js';
+export interface UiSegmentedItem<T extends string = string> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+}
+export interface UiSegmentedControlProps<T extends string = string> {
+    /** Names the group for assistive technology. */
+    label: string;
+    items: readonly UiSegmentedItem<T>[];
+    /** The pressed option. Undefined leaves every option unpressed. */
+    modelValue?: T | undefined;
+    /** Shows only the icon slot; each label becomes the button's accessible name and tooltip. */
+    iconOnly?: boolean;
+    disabled?: boolean;
+    size?: UiControlSize;
+}
+declare const __VLS_export: <T extends string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<UiSegmentedControlProps<T> & {
+        "onUpdate:modelValue"?: (value: T) => any;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        icon?(props: {
+            item: UiSegmentedItem<T>;
+            pressed: boolean;
+        }): unknown;
+    };
+    emit: (event: "update:modelValue", value: T) => void;
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/index.d.ts

@@ -28,6 +28,8 @@ export { default as UiRadioCardGroup } from './components/UiRadioCardGroup.vue';
 export type { UiRadioCardGroupProps } from './components/UiRadioCardGroup.vue';
 export { default as UiScore } from './components/UiScore.vue';
 export type { UiScoreProps } from './components/UiScore.vue';
+export { default as UiSegmentedControl } from './components/UiSegmentedControl.vue';
+export type { UiSegmentedControlProps, UiSegmentedItem } from './components/UiSegmentedControl.vue';
 export { default as UiSelect } from './components/UiSelect.vue';
 export type { UiSelectProps } from './components/UiSelect.vue';
 export { default as UiSlider } from './components/UiSlider.vue';