@noxlovette/material 0.5.1 → 0.6.0

package/dist/components/forms/search/Search.mdx

@@ -0,0 +1,38 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as SearchStories from './Search.stories.svelte';
+
+<Meta of={SearchStories} />
+
+<Title />
+
+<Subtitle>The search bar lets users enter a query to find information in an app.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/search/specs) ·
+`import { Search } from '@noxlovette/material';`
+
+<Canvas of={SearchStories.Playground} />
+
+<Controls of={SearchStories.Playground} />
+
+## Search bar, not search view
+
+This is M3's search bar: a 56dp, fully rounded `surface-container-high` field with a leading
+search icon. It's a different thing from the full-screen search view, and from a filled text
+field. Once there's a value, a clear button appears at the end. Other native `<input>` attributes
+pass straight through to the input.
+
+```svelte
+<Search placeholder="Search" bind:value={query} />
+```
+
+<Canvas of={SearchStories.WithActions} />
+
+For a search field inside a top app bar, use `AppBar`'s `search` prop instead.
+
+## Accessibility
+
+- **Label.** The `type="search"` input sits inside a `<label>` with its own id, so the whole bar
+  is a target and several bars can share a page.
+- **Clear button.** A 48dp `type="button"` labelled by `clearLabel` (default "Clear search"). It
+  never submits a form and returns focus to the input.
+- **Focus.** Keyboard focus draws the M3 focus indicator around the bar.

package/dist/components/forms/search/Search.stories.svelte

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Search from './Search.svelte';
+  import ButtonIcon from '../../buttons/ButtonIcon.svelte';
 
   const { Story } = defineMeta({
     title: 'Forms/Search',
@@ -18,24 +19,33 @@
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="max-w-md p-6">
+    <div class="p-spacing-300 max-w-md">
       <Search {...args} />
     </div>
   {/snippet}
 </Story>
 
 <Story name="With Value" asChild>
-  <div class="max-w-md p-6">
+  <div class="p-spacing-300 max-w-md">
     <Search value="Material Design" />
   </div>
 </Story>
 
-<Story name="Custom Icons" asChild>
-  <div class="max-w-md p-6">
-    <Search
-      value="query"
-      leadingIconProps={{ name: 'search' }}
-      trailingIconProps={{ name: 'mic' }}
-    />
+<Story name="With actions" asChild>
+  <div class="gap-spacing-200 p-spacing-300 flex max-w-md flex-col">
+    <Search>
+      {#snippet leading()}
+        <ButtonIcon variant="standard" iconProps={{ name: 'menu' }} aria-label="Menu" />
+      {/snippet}
+      {#snippet trailing()}
+        <ButtonIcon variant="standard" iconProps={{ name: 'mic' }} aria-label="Voice search" />
+        <ButtonIcon
+          variant="standard"
+          iconProps={{ name: 'account_circle' }}
+          aria-label="Account"
+        />
+      {/snippet}
+    </Search>
+    <Search value="query" leadingIconProps={null} placeholder="No leading icon" />
   </div>
 </Story>

package/dist/components/forms/search/Search.svelte

@@ -1,52 +1,75 @@
 <!--
 @component
-Material 3 Search Bar.
+Material 3 Search Bar (contained, M3 Expressive).
 
 Search bars allow users to enter a query to find specific information within an app.
 
-@see https://m3.material.io/components/search/overview
+@see https://m3.material.io/components/search/specs
 -->
 <script lang="ts">
   import { search } from './theme.js';
   import clsx from 'clsx';
   import type { SearchProps } from './types.js';
   import { Icon } from '../../../utils/index.js';
+  import ButtonIcon from '../../buttons/ButtonIcon.svelte';
+
+  const uid = $props.id();
 
   let {
-    children,
-    placeholder = 'Поиск',
+    placeholder = 'Search',
     value = $bindable(),
     elementRef = $bindable(),
+    leading,
+    trailing,
     trailingIconProps = { name: 'close' },
     leadingIconProps = { name: 'search' },
+    clearLabel = 'Clear search',
     class: className,
+    id = uid,
     trailingClick = () => {
       value = '';
+      elementRef?.focus();
     },
     ...restProps
   }: SearchProps = $props();
 
-  const { base, leadingIcon, trailingIcon, input } = $derived(search());
+  const showClear = $derived(!!trailingIconProps && !!value);
+
+  const s = $derived(
+    search({
+      hasLeading: !!leading || !!leadingIconProps,
+      hasTrailing: !!trailing || showClear
+    })
+  );
 </script>
 
-<label for="search" class={base({ class: clsx(className) })}>
-  {#if leadingIconProps}
-    <Icon {...leadingIconProps} class={leadingIcon()} />
+<label for={id} class={s.base({ class: clsx(className) })}>
+  {#if leading}
+    <span class={s.leading()}>{@render leading()}</span>
+  {:else if leadingIconProps}
+    <span class={s.leadingIcon()} aria-hidden="true"><Icon {...leadingIconProps} /></span>
   {/if}
   <input
-    id="search"
     {...restProps}
+    {id}
     {placeholder}
     bind:this={elementRef}
     bind:value
-    type="text"
-    class={input()}
-    oncancel={() => (value = undefined)}
+    type="search"
+    class={s.input()}
   />
-
-  {#if trailingIconProps && value}
-    <button onclick={trailingClick} class="z-10">
-      <Icon {...trailingIconProps} class={trailingIcon()} />
-    </button>
+  {#if showClear || trailing}
+    <span class={s.trailing()}>
+      {#if showClear}
+        <ButtonIcon
+          variant="standard"
+          type="button"
+          iconProps={trailingIconProps!}
+          aria-label={clearLabel}
+          onclick={trailingClick}
+        />
+      {/if}
+      {@render trailing?.()}
+    </span>
   {/if}
 </label>

package/dist/components/forms/search/Search.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { SearchProps } from './types.js';
 /**
- * Material 3 Search Bar.
+ * Material 3 Search Bar (contained, M3 Expressive).
  *
  * Search bars allow users to enter a query to find specific information within an app.
  *
- * @see https://m3.material.io/components/search/overview
+ * @see https://m3.material.io/components/search/specs
  */
 declare const Search: import("svelte").Component<SearchProps, {}, "value" | "elementRef">;
 type Search = ReturnType<typeof Search>;

package/dist/components/forms/search/theme.d.ts

@@ -1,33 +1,66 @@
 import { type VariantProps } from 'tailwind-variants';
 export type SearchVariants = VariantProps<typeof search>;
+/**
+ * M3 Expressive contained search bar (https://m3.material.io/components/search/specs):
+ * 56dp, circular, surface-container-high, flat. 48dp leading/trailing targets at a 4dp inset,
+ * 4dp between the leading element and the label, 0 between trailing actions; 16dp at an edge
+ * with no action. Hover 8% / pressed 10% on-surface; focus 3dp secondary outline, 2dp offset.
+ */
 export declare const search: import("tailwind-variants").TVReturnType<{
-    shadow: {
-        true: "shadow-elevation-3";
-        false: "";
+    hasLeading: {
+        true: "";
+        false: {
+            input: string;
+        };
+    };
+    hasTrailing: {
+        true: "";
+        false: {
+            input: string;
+        };
     };
 }, {
     base: string;
+    leading: string;
     leadingIcon: string;
-    trailingIcon: string;
     input: string;
+    trailing: string;
 }, undefined, {
-    shadow: {
-        true: "shadow-elevation-3";
-        false: "";
+    hasLeading: {
+        true: "";
+        false: {
+            input: string;
+        };
+    };
+    hasTrailing: {
+        true: "";
+        false: {
+            input: string;
+        };
     };
 }, {
     base: string;
+    leading: string;
     leadingIcon: string;
-    trailingIcon: string;
     input: string;
+    trailing: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
-    shadow: {
-        true: "shadow-elevation-3";
-        false: "";
+    hasLeading: {
+        true: "";
+        false: {
+            input: string;
+        };
+    };
+    hasTrailing: {
+        true: "";
+        false: {
+            input: string;
+        };
     };
 }, {
     base: string;
+    leading: string;
     leadingIcon: string;
-    trailingIcon: string;
     input: string;
+    trailing: string;
 }>>;

package/dist/components/forms/search/theme.js

@@ -1,15 +1,20 @@
 import { tv } from 'tailwind-variants';
+/**
+ * M3 Expressive contained search bar (https://m3.material.io/components/search/specs):
+ * 56dp, circular, surface-container-high, flat. 48dp leading/trailing targets at a 4dp inset,
+ * 4dp between the leading element and the label, 0 between trailing actions; 16dp at an edge
+ * with no action. Hover 8% / pressed 10% on-surface; focus 3dp secondary outline, 2dp offset.
+ */
 export const search = tv({
     slots: {
-        base: 'group grow cursor-text focus-inside:ring-3 focus-inside:ring-inset-2 focus-inside:ring-md-sys-color-secondary relative bg-md-sys-color-surface-container-high  rounded-full h-14 state-layer before:rounded-full hover:before:bg-md-sys-color-on-surface/8 items-center flex w-full max-w-[720px] px-4',
-        leadingIcon: 'text-md-sys-color-on-surface text-[24px] size-6 mr-4',
-        trailingIcon: 'text-md-sys-color-on-surface-variant text-[24px] size-6 ml-4',
-        input: ' placeholder:text-md-sys-color-on-surface-variant placeholder:md-sys-typescale-body-large z-50 md-sys-typescale-body-large text-md-sys-color-on-surface outline-none w-full'
+        base: 'state-layer relative flex h-spacing-700 w-full max-w-[720px] grow cursor-text items-center rounded-full bg-md-sys-color-surface-container-high ps-spacing-50 pe-spacing-50 before:rounded-full hover:before:bg-md-sys-color-on-surface/8 active:before:bg-md-sys-color-on-surface/10 has-[input:focus-visible]:outline-3 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-md-sys-color-secondary',
+        leading: 'text-md-sys-color-on-surface relative flex shrink-0 items-center',
+        leadingIcon: 'text-md-sys-color-on-surface grid size-spacing-600 shrink-0 place-items-center',
+        input: 'md-sys-typescale-body-large text-md-sys-color-on-surface placeholder:text-md-sys-color-on-surface-variant relative ms-spacing-50 me-spacing-50 w-full min-w-spacing-0 bg-transparent outline-none [&::-webkit-search-cancel-button]:hidden',
+        trailing: 'text-md-sys-color-on-surface-variant relative flex shrink-0 items-center'
     },
     variants: {
-        shadow: {
-            true: 'shadow-elevation-3',
-            false: ''
-        }
+        hasLeading: { true: '', false: { input: 'ms-spacing-150' } },
+        hasTrailing: { true: '', false: { input: 'me-spacing-150' } }
     }
 });

package/dist/components/forms/search/types.d.ts

@@ -1,15 +1,10 @@
 import type { IconProps } from '../../../utils/index.js';
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
-import type { SearchVariants } from './theme.js';
 /**
  * Props for the Search component.
  */
-export interface SearchProps extends SearchVariants, Omit<HTMLInputAttributes, 'size'> {
-    /**
-     * The content of the search bar, typically used for custom layouts.
-     */
-    children?: Snippet;
+export interface SearchProps extends Omit<HTMLInputAttributes, 'size'> {
     /**
      * The current value of the search input.
      */
@@ -19,16 +14,27 @@ export interface SearchProps extends SearchVariants, Omit<HTMLInputAttributes, '
      */
     elementRef?: HTMLInputElement;
     /**
-     * Callback function when the trailing icon is clicked.
-     * Default behavior clears the search value.
+     * A leading action, e.g. a menu or back icon button. Replaces the leading icon.
+     */
+    leading?: Snippet;
+    /**
+     * Trailing actions and/or an avatar, e.g. a mic icon button. Rendered after the clear button.
+     */
+    trailing?: Snippet;
+    /**
+     * Called by the clear button. Defaults to clearing the value and refocusing the input.
      */
     trailingClick?: () => void;
     /**
-     * Props for the leading icon (typically a search icon).
+     * Props for the leading icon (a search icon by default); `null` removes it.
+     */
+    leadingIconProps?: IconProps | null;
+    /**
+     * Props for the clear button's icon, shown while there is a value; `null` removes the button.
      */
-    leadingIconProps?: IconProps;
+    trailingIconProps?: IconProps | null;
     /**
-     * Props for the trailing icon (typically a clear/close icon).
+     * Accessible label for the clear button.
      */
-    trailingIconProps?: IconProps;
+    clearLabel?: string;
 }

package/dist/components/forms/select/Select.mdx

@@ -0,0 +1,53 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as SelectStories from './Select.stories.svelte';
+
+<Meta of={SelectStories} />
+
+<Title />
+
+<Subtitle>Select lets users choose one option from a list.</Subtitle>
+
+[M3 spec (menus)](https://m3.material.io/components/menus/specs) ·
+`import { Select } from '@noxlovette/material';`
+
+<Canvas of={SelectStories.Playground} />
+
+<Controls of={SelectStories.Playground} />
+
+## Options
+
+M3 specifies dropdown selection as part of menus, so `Select` pairs a text-field-style trigger
+with a menu panel. The panel is built entirely from the `options` array; it takes no children.
+
+Each entry is either an item (bits-ui's `Select.ItemProps`: `value`, `label`, `disabled`…) or a
+group, `{ type: 'group', heading?, items }`, which renders a labelled section:
+
+```svelte
+<script lang="ts">
+  import { Select, type SelectOption } from '@noxlovette/material';
+
+  let fruit = $state<string | undefined>();
+  const options: SelectOption[] = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' }
+  ];
+</script>
+
+<Select type="single" placeholder="Choose a fruit" {options} bind:value={fruit} />
+```
+
+<Canvas of={SelectStories.GroupedOptions} />
+
+<Canvas of={SelectStories.States} />
+
+## Styled primitives
+
+`SelectItem`, `SelectGroup`, `SelectLabel` and `SelectSeparator` carry the same styling. Use them
+only when building your own dropdown directly on bits-ui's `Select.Root`; `Select` itself doesn't
+accept them.
+
+## Accessibility
+
+- **Keyboard.** Arrow keys move through options, Enter and Space select, and Escape closes.
+- **Selection** shows a check icon as well as a color.
+- **Disabled options** are skipped by keyboard navigation.

package/dist/components/forms/select/Select.stories.svelte

@@ -57,20 +57,20 @@
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="max-w-sm p-6">
+    <div class="p-spacing-300 max-w-sm">
       <Select {...args} />
     </div>
   {/snippet}
 </Story>
 
 <Story name="Grouped Options" asChild>
-  <div class="max-w-sm p-6">
+  <div class="p-spacing-300 max-w-sm">
     <Select type="single" placeholder="Choose a fruit" options={groupedOptions} />
   </div>
 </Story>
 
 <Story name="With Leading Icon" asChild>
-  <div class="max-w-sm p-6">
+  <div class="p-spacing-300 max-w-sm">
     <Select
       type="single"
       placeholder="Choose a fruit"
@@ -81,7 +81,7 @@
 </Story>
 
 <Story name="States" asChild>
-  <div class="flex max-w-sm flex-col gap-6 p-6">
+  <div class="gap-spacing-300 p-spacing-300 flex max-w-sm flex-col">
     <Select type="single" placeholder="Default" options={fruitOptions} />
     <Select type="single" placeholder="Error" options={fruitOptions} error value="apple" />
     <Select type="single" placeholder="Disabled" options={fruitOptions} disabled />

package/dist/components/forms/select/Select.svelte

@@ -94,7 +94,11 @@ Powered by bits-ui for accessibility and behavior.
                                 {#snippet children({ selected })}
                                   <span class="flex-1 truncate">{innerItem.label}</span>
                                   {#if selected}
-                                    <Icon aria-hidden="true" name="check" class="size-5 shrink-0" />
+                                    <Icon
+                                      aria-hidden="true"
+                                      name="check"
+                                      class="size-spacing-250 shrink-0"
+                                    />
                                   {/if}
                                 {/snippet}
                               </Select.Item>
@@ -106,7 +110,11 @@ Powered by bits-ui for accessibility and behavior.
                           {#snippet children({ selected })}
                             <span class="flex-1 truncate">{item.label}</span>
                             {#if selected}
-                              <Icon aria-hidden="true" name="check" class="size-5 shrink-0" />
+                              <Icon
+                                aria-hidden="true"
+                                name="check"
+                                class="size-spacing-250 shrink-0"
+                              />
                             {/if}
                           {/snippet}
                         </Select.Item>

package/dist/components/forms/select/SelectItem.svelte

@@ -28,7 +28,7 @@
     {:else}
       <span class="flex-1 truncate">{label ?? value}</span>
       {#if selected}
-        <Icon name="check" class="size-5 shrink-0" />
+        <Icon name="check" class="size-spacing-250 shrink-0" />
       {/if}
     {/if}
   {/snippet}

package/dist/components/forms/select/theme.js

@@ -3,14 +3,14 @@ export const select = tv({
     slots: {
         root: 'relative w-full',
         base: `
-      group w-full h-14 px-0 relative flex items-center
+      group w-full h-spacing-700 px-spacing-0 relative flex items-center
     `,
         trigger: `
       group peer w-full h-full flex items-center justify-between bg-transparent outline-none
       cursor-pointer
     `,
         inputWrapper: `
-      relative flex-1 h-full px-4 flex items-center
+      relative flex-1 h-full px-spacing-200 flex items-center
     `,
         value: `
       w-full bg-transparent outline-none
@@ -20,12 +20,12 @@ export const select = tv({
       truncate text-left
     `,
         leadingIcon: `
-      text-md-sys-color-on-surface-variant size-6
+      text-md-sys-color-on-surface-variant size-spacing-300
       group-has-[[data-state=open]]:text-md-sys-color-primary
-      group-data-[invalid]:text-md-sys-color-error ml-3 text-[24px]
+      group-data-[invalid]:text-md-sys-color-error ml-spacing-150 text-[24px]
     `,
         dropdownIcon: `
-      mr-3 text-md-sys-color-on-surface-variant size-6
+      mr-spacing-150 text-md-sys-color-on-surface-variant size-spacing-300
       group-data-[state=open]:text-md-sys-color-primary
       group-data-[invalid]:text-md-sys-color-error z-20 text-[24px]
       transition-transform md-sys-motion-fast-spatial
@@ -33,12 +33,12 @@ export const select = tv({
     `,
         content: `
       z-[100] min-w-[var(--bits-select-anchor-width)] max-h-96 overflow-y-auto
-      rounded-lg gap-1 bg-md-sys-color-surface-container-high
-      shadow-elevation-3 ring-md-sys-color-outline/10 px-2 py-1 outline-none
+      rounded-lg gap-spacing-50 bg-md-sys-color-surface-container-high
+      shadow-elevation-3 ring-md-sys-color-outline/10 px-spacing-100 py-spacing-50 outline-none
     `,
         item: `
       rounded-sm relative flex w-full cursor-pointer select-none items-center
-      px-3 py-2 outline-none
+      px-spacing-150 py-spacing-100 outline-none
       md-sys-typescale-body-large text-md-sys-color-on-surface
       hover:bg-md-sys-color-on-surface/8
       data-[highlighted]:bg-md-sys-color-on-surface/8
@@ -48,14 +48,14 @@ export const select = tv({
       transition-colors md-sys-motion-fast-effects
     `,
         groupLabel: `
-      px-3 pt-2 pb-1 md-sys-typescale-label-medium
+      px-spacing-150 pt-spacing-100 pb-spacing-50 md-sys-typescale-label-medium
       text-md-sys-color-primary
     `,
         separator: `
-      my-1 h-px bg-md-sys-color-outline-variant
+      my-spacing-50 h-px bg-md-sys-color-outline-variant
     `,
         supportingText: `
-      px-4 pt-1 flex justify-between
+      px-spacing-200 pt-spacing-50 flex justify-between
       md-sys-typescale-body-small
       text-md-sys-color-on-surface-variant
       group-data-[invalid]:text-md-sys-color-error
@@ -67,7 +67,7 @@ export const select = tv({
                 base: `
           bg-md-sys-color-surface-container-highest
           rounded-t-xs state-layer before:rounded-xs hover:before:bg-md-sys-color-on-surface/8
-          after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-md-sys-color-on-surface-variant
+          after:absolute after:bottom-spacing-0 after:left-spacing-0 after:right-spacing-0 after:h-px after:bg-md-sys-color-on-surface-variant
           after:transition-[height,background-color] after:md-sys-motion-fast-spatial
           hover:after:bg-md-sys-color-on-surface
           has-[[data-state=open]]:after:bg-md-sys-color-primary

package/dist/components/forms/slider/Slider.mdx

@@ -0,0 +1,85 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as SliderStories from './Slider.stories.svelte';
+
+<Meta of={SliderStories} />
+
+<Title />
+
+<Subtitle>Sliders allow users to make selections from a range of values.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/sliders/specs) ·
+`import { Slider } from '@noxlovette/material';`
+
+<Canvas of={SliderStories.Playground} />
+
+<Controls of={SliderStories.Playground} />
+
+This is the M3 Expressive slider. It has two tracks, active and inactive, with a 6dp gap on each
+side of a 4dp bar handle. Bind `value` to read and set it:
+
+```svelte
+<script lang="ts">
+  let volume = $state(40);
+</script>
+
+<Slider bind:value={volume} min={0} max={100} />
+```
+
+## Choosing a size
+
+`xs` is the default. Go larger when the slider is the main control on the screen, or when it needs
+inset icons.
+
+| Size | Track | Handle | Outer corner | Inset icon   |
+| ---- | ----- | ------ | ------------ | ------------ |
+| `xs` | 16dp  | 44dp   | 8dp          | —            |
+| `s`  | 24dp  | 44dp   | 8dp          | —            |
+| `m`  | 40dp  | 52dp   | 12dp         | 24dp, 6dp in |
+| `l`  | 56dp  | 68dp   | 16dp         | 24dp, 6dp in |
+| `xl` | 96dp  | 108dp  | 28dp         | 32dp, 8dp in |
+
+The corners next to the handle are always 2dp.
+
+<Canvas of={SliderStories.Sizes} />
+
+## Inset icons
+
+`leadingIconProps` and `trailingIconProps` put an icon inside the track. M3 defines inset icons
+only for `m`, `l` and `xl`, so they're ignored on `xs` and `s`. When the handle gets too close for
+the icon to fit in its track, the icon moves across the handle into the other track. It also takes
+that track's color.
+
+<Canvas of={SliderStories.WithIcons} />
+
+## Continuous or discrete
+
+Leave `step="any"` for a continuous slider. Set a numeric `step` to make it discrete, and add
+`stops` to show a 4dp stop indicator at each step. With or without `stops`, `endStops` marks the
+end of the track 4dp from its edge. Stops hide within 6dp of the handle, and wherever an inset
+icon covers them.
+
+<Canvas of={SliderStories.DiscreteWithStops} />
+
+## Value indicator
+
+With `showValue`, a 48×44dp indicator shows above the handle while it's dragged or has keyboard
+focus. It sits 12dp above the handle, on inverse-surface. Use `format` to add units or localize
+the number.
+
+## States
+
+- **Pressed and focused:** the handle narrows from 4dp to 2dp on a fast spatial spring, and the
+  6dp gaps follow its edge.
+- **Disabled:** the active track is on-surface at 38% opacity, the inactive track 12%, and the
+  handle 38%.
+
+<Canvas of={SliderStories.Disabled} />
+
+## Accessibility
+
+- **Keyboard:** the arrow keys move by one step, and Home/End jump to `min`/`max` (via bits-ui's
+  `Slider.Root`).
+- **Focus:** keyboard focus narrows the handle, draws an outline around it, and reveals the value
+  indicator.
+- **Labelling:** give the slider an accessible name, such as `aria-label="Volume"`. Inset icons
+  are decorative and don't label it.