@octans/ui 1.0.0 → 1.2.0

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

@@ -1,11 +1,41 @@
 import { PageProps } from './types';
-declare var __VLS_21: {}, __VLS_60: {}, __VLS_77: {};
+declare var __VLS_1: {}, __VLS_8: {
+    breadcrumbs: import('./types').BreadcrumbType[];
+}, __VLS_18: {}, __VLS_20: {
+    title: string | undefined;
+}, __VLS_22: {}, __VLS_31: {}, __VLS_39: {
+    subtitle: string | undefined;
+}, __VLS_41: {
+    actions: import('../types').ActionType[];
+    groups: import('./types').ActionGroupType[];
+}, __VLS_63: {
+    sections: {
+        title: string;
+        items: import('../types').ActionType[];
+    }[];
+}, __VLS_76: {}, __VLS_93: {};
 type __VLS_Slots = {} & {
-    badge?: (props: typeof __VLS_21) => any;
+    loader?: (props: typeof __VLS_1) => any;
+} & {
+    breadcrumbs?: (props: typeof __VLS_8) => any;
+} & {
+    header?: (props: typeof __VLS_18) => any;
+} & {
+    title?: (props: typeof __VLS_20) => any;
+} & {
+    help?: (props: typeof __VLS_22) => any;
+} & {
+    badge?: (props: typeof __VLS_31) => any;
+} & {
+    subtitle?: (props: typeof __VLS_39) => any;
+} & {
+    secondaryActions?: (props: typeof __VLS_41) => any;
+} & {
+    collapsedActions?: (props: typeof __VLS_63) => any;
 } & {
-    primaryAction?: (props: typeof __VLS_60) => any;
+    primaryAction?: (props: typeof __VLS_76) => any;
 } & {
-    default?: (props: typeof __VLS_77) => any;
+    default?: (props: typeof __VLS_93) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<PageProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     save: () => any;

package/dist/components/{Popper/Popper.vue.d.ts → Popover/Popover.vue.d.ts}

@@ -1,4 +1,4 @@
-import { PopperProps } from './types';
+import { PopoverProps } from './types';
 declare function show(): void;
 declare function hide(): void;
 declare function toggle(): void;
@@ -18,16 +18,16 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_40) => any;
 };
-declare const __VLS_base: import('vue').DefineComponent<PopperProps, {
+declare const __VLS_base: import('vue').DefineComponent<PopoverProps, {
     show: typeof show;
     hide: typeof hide;
     toggle: typeof toggle;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:visible": (val: boolean) => any;
-}, string, import('vue').PublicProps, Readonly<PopperProps> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<PopoverProps> & Readonly<{
     "onUpdate:visible"?: ((val: boolean) => any) | undefined;
 }>, {
-    placement: import('./types').PopperPlacementType;
+    placement: import('./types').PopoverPlacementType;
     teleportTo: string;
     disabled: boolean;
     autoTriggerToggle: boolean;

package/dist/components/Popover/index.d.ts

@@ -0,0 +1,90 @@
+import { PopoverPlacementType, PopoverProps } from './types';
+export { default as Popover } from './Popover.vue';
+export * from './types';
+/**
+ * @deprecated Renamed to `Popover`.
+ *
+ * The component was never built on popper.js — it wraps reka-ui's Popover
+ * primitives — so the name pointed at a library the library does not use, and
+ * away from the thing every design system calls this. The alias keeps existing
+ * imports working and will be removed in a future major.
+ */
+export declare const Popper: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<PopoverProps> & Readonly<{
+        "onUpdate:visible"?: ((val: boolean) => any) | undefined;
+    }>, {
+        show: () => void;
+        hide: () => void;
+        toggle: () => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        "update:visible": (val: boolean) => any;
+    }, import('vue').PublicProps, {
+        placement: PopoverPlacementType;
+        teleportTo: string;
+        disabled: boolean;
+        autoTriggerToggle: boolean;
+        autoHide: boolean;
+        hover: boolean;
+        zIndex: number;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<PopoverProps> & Readonly<{
+        "onUpdate:visible"?: ((val: boolean) => any) | undefined;
+    }>, {
+        show: () => void;
+        hide: () => void;
+        toggle: () => void;
+    }, {}, {}, {}, {
+        placement: PopoverPlacementType;
+        teleportTo: string;
+        disabled: boolean;
+        autoTriggerToggle: boolean;
+        autoHide: boolean;
+        hover: boolean;
+        zIndex: number;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<PopoverProps> & Readonly<{
+    "onUpdate:visible"?: ((val: boolean) => any) | undefined;
+}>, {
+    show: () => void;
+    hide: () => void;
+    toggle: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:visible": (val: boolean) => any;
+}, string, {
+    placement: PopoverPlacementType;
+    teleportTo: string;
+    disabled: boolean;
+    autoTriggerToggle: boolean;
+    autoHide: boolean;
+    hover: boolean;
+    zIndex: number;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        trigger?: (props: {
+            visible: boolean;
+            show: () => void;
+            hide: () => void;
+            toggle: () => void;
+        }) => any;
+    } & {
+        default?: (props: {
+            visible: boolean;
+            show: () => void;
+            hide: () => void;
+            toggle: () => void;
+        }) => any;
+    };
+});
+/** @deprecated Renamed to `PopoverProps`. */
+export type PopperProps = PopoverProps;
+/** @deprecated Renamed to `PopoverPlacementType`. */
+export type PopperPlacementType = PopoverPlacementType;

package/dist/components/{Popper → Popover}/types.d.ts

@@ -1,7 +1,7 @@
-export type PopperPlacementType = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
-export interface PopperProps {
+export type PopoverPlacementType = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+export interface PopoverProps {
     visible?: boolean;
-    placement?: PopperPlacementType;
+    placement?: PopoverPlacementType;
     teleportTo?: string;
     disabled?: boolean;
     /**

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

@@ -14,6 +14,19 @@ declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractP
     error: {
         type: PropType<string | false | null>;
     };
+    /**
+     * Marks the field as required: an asterisk after the label, and
+     * `aria-required` on the control.
+     *
+     * Announced, not enforced — it deliberately does NOT set the native
+     * `required` attribute, so the browser's own validation bubble stays out
+     * of the way of whatever the app does about errors. Use `error` to show a
+     * failure.
+     */
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Help text to show below the control.
      */
@@ -105,6 +118,19 @@ declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractP
     error: {
         type: PropType<string | false | null>;
     };
+    /**
+     * Marks the field as required: an asterisk after the label, and
+     * `aria-required` on the control.
+     *
+     * Announced, not enforced — it deliberately does NOT set the native
+     * `required` attribute, so the browser's own validation bubble stays out
+     * of the way of whatever the app does about errors. Use `error` to show a
+     * failure.
+     */
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Help text to show below the control.
      */
@@ -173,6 +199,7 @@ declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractP
     };
 }>> & Readonly<{}>, {
     disabled: boolean;
+    required: boolean;
     modelValue: number;
     readonly: boolean;
     showInput: boolean;

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

@@ -45,6 +45,19 @@ declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractP
     helpLink: {
         type: PropType<string | false | null>;
     };
+    /**
+     * Marks the field as required: an asterisk after the label, and
+     * `aria-required` on the control.
+     *
+     * Announced, not enforced — it deliberately does NOT set the native
+     * `required` attribute, so the browser's own validation bubble stays out
+     * of the way of whatever the app does about errors. Use `error` to show a
+     * failure.
+     */
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * A array of values when using the `multiple` mode, otherwise a single
      * value of any type.
@@ -376,6 +389,19 @@ declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractP
     helpLink: {
         type: PropType<string | false | null>;
     };
+    /**
+     * Marks the field as required: an asterisk after the label, and
+     * `aria-required` on the control.
+     *
+     * Announced, not enforced — it deliberately does NOT set the native
+     * `required` attribute, so the browser's own validation bubble stays out
+     * of the way of whatever the app does about errors. Use `error` to show a
+     * failure.
+     */
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * A array of values when using the `multiple` mode, otherwise a single
      * value of any type.
@@ -594,6 +620,7 @@ declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractP
 }>, {
     disabled: boolean;
     loading: boolean;
+    required: boolean;
     modelValue: any;
     placeholder: string;
     readonly: boolean;
@@ -756,7 +783,7 @@ declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractP
         }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
             remove: () => any;
         }, import('vue').PublicProps, {
-            tooltipPosition: import('../Popper').PopperPlacementType;
+            tooltipPosition: import('../Popover').PopoverPlacementType;
             required: boolean;
         }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
             P: {};
@@ -768,7 +795,7 @@ declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractP
         }, Readonly<import('../Tag/Tag.vue').TagProps> & Readonly<{
             onRemove?: (() => any) | undefined;
         }>, {}, {}, {}, {}, {
-            tooltipPosition: import('../Popper').PopperPlacementType;
+            tooltipPosition: import('../Popover').PopoverPlacementType;
             required: boolean;
         }>;
         __isFragment?: never;
@@ -779,7 +806,7 @@ declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractP
     }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
         remove: () => any;
     }, string, {
-        tooltipPosition: import('../Popper').PopperPlacementType;
+        tooltipPosition: import('../Popover').PopoverPlacementType;
         required: boolean;
     }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
         $slots: {

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

@@ -0,0 +1,19 @@
+import { SkeletonPageProps } from './types';
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<SkeletonPageProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkeletonPageProps> & Readonly<{}>, {
+    primaryAction: boolean;
+    size: "default" | "fullWidth" | "narrow" | "wide";
+    title: boolean;
+    cards: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/SkeletonPage/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SkeletonPage } from './SkeletonPage.vue';
+export * from './types';

package/dist/components/SkeletonPage/types.d.ts

@@ -0,0 +1,26 @@
+import { PageProps } from '../Page';
+export interface SkeletonPageProps {
+    /**
+     * The width preset, forwarded to the `Page` underneath.
+     *
+     * Set it to whatever the real page uses. That is the whole reason this
+     * renders a real `Page` rather than a loose stack of shapes — a skeleton at
+     * a different width moves the content sideways the moment it swaps out.
+     */
+    size?: PageProps['size'];
+    /**
+     * Draws a placeholder where the page title will be. On by default; turn it
+     * off for a page whose title you already know and can render for real.
+     */
+    title?: boolean;
+    /**
+     * Draws a button-shaped placeholder in the header, for a page that has a
+     * primary action.
+     */
+    primaryAction?: boolean;
+    /**
+     * How many skeleton cards to stack in the body. Ignored when the default
+     * slot is used.
+     */
+    cards?: number;
+}

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

@@ -1,11 +1,11 @@
-import { PopperPlacementType } from '../Popper';
+import { PopoverPlacementType } from '../Popover';
 export interface TagProps {
     /**
      * Disables the remove button.
      */
     required?: boolean;
     tooltip?: string | null;
-    tooltipPosition?: PopperPlacementType;
+    tooltipPosition?: PopoverPlacementType;
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -16,7 +16,7 @@ declare const __VLS_base: import('vue').DefineComponent<TagProps, {}, {}, {}, {}
 }, string, import('vue').PublicProps, Readonly<TagProps> & Readonly<{
     onRemove?: (() => any) | undefined;
 }>, {
-    tooltipPosition: PopperPlacementType;
+    tooltipPosition: PopoverPlacementType;
     required: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/TextField/types.d.ts

@@ -127,4 +127,14 @@ export interface TextFieldProps {
      * fill from the right (e.g. thousands separators).
      */
     maskReversed?: boolean;
+    /**
+     * Marks the field as required: an asterisk after the label, and
+     * `aria-required` on the control.
+     *
+     * Announced, not enforced — it deliberately does NOT set the native
+     * `required` attribute, so the browser's own validation bubble stays out of
+     * the way of whatever the app does about errors. Use `error` to show a
+     * failure.
+     */
+    required?: boolean;
 }

package/dist/components/TimePicker/types.d.ts

@@ -82,6 +82,16 @@ export interface TimePickerProps {
      * when the field loses focus.
      */
     minuteStepStrict?: boolean;
+    /**
+     * Marks the field as required: an asterisk after the label, and
+     * `aria-required` on the control.
+     *
+     * Announced, not enforced — it deliberately does NOT set the native
+     * `required` attribute, so the browser's own validation bubble stays out of
+     * the way of whatever the app does about errors. Use `error` to show a
+     * failure.
+     */
+    required?: boolean;
     /**
      * @deprecated No longer used. The picker is now an inline input and does not
      * open a popper. Kept for backwards compatibility.

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

@@ -1,9 +1,9 @@
 import { ToggleSwitchProps } from './types';
-declare var __VLS_1: {
+declare var __VLS_8: {
     checked: boolean;
 };
 type __VLS_Slots = {} & {
-    handle?: (props: typeof __VLS_1) => any;
+    handle?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<ToggleSwitchProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (v: boolean) => any;
@@ -12,7 +12,13 @@ declare const __VLS_base: import('vue').DefineComponent<ToggleSwitchProps, {}, {
 }>, {
     disabled: boolean;
     size: "small" | "medium" | "large";
+    label: string | false | null;
+    error: string | false | null;
     color: string;
+    helpText: string | false | null;
+    required: boolean;
+    helpTextHtml: string | false | null;
+    helpLink: string | false | null;
     checked: boolean;
     trueValue: any;
     falseValue: any;

package/dist/components/ToggleSwitch/types.d.ts

@@ -1,4 +1,33 @@
 export interface ToggleSwitchProps {
+    /**
+     * The title of the field, drawn above the switch.
+     *
+     * A switch with any of `label` / `error` / `helpText` / `helpTextHtml` /
+     * `helpLink` set is wrapped in `Labelled`, like every other form control in
+     * the library. Without them the markup is the bare switch, as it always was.
+     */
+    label?: string | false | null;
+    /**
+     * Displays the value as an error message below the switch.
+     */
+    error?: string | false | null;
+    /**
+     * Displays the value as help text below the switch.
+     */
+    helpText?: string | false | null;
+    /**
+     * Renders help text as raw HTML. Use with caution.
+     */
+    helpTextHtml?: string | false | null;
+    /**
+     * Renders a help icon next to the label which links to an external page.
+     */
+    helpLink?: string | false | null;
+    /**
+     * Marks the field as required: an asterisk after the label, and
+     * `aria-required` on the switch.
+     */
+    required?: boolean;
     /**
      * The bound value / v-model.
      */

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

@@ -1,6 +1,6 @@
-import { PopperPlacementType } from '../Popper';
+import { PopoverPlacementType } from '../Popover';
 export interface TooltipProps {
-    placement?: PopperPlacementType;
+    placement?: PopoverPlacementType;
     content?: string;
 }
 declare var __VLS_26: {}, __VLS_34: {};

package/dist/components/all.d.ts

@@ -39,6 +39,7 @@ export * from './GradientPicker';
 export * from './Heading';
 export * from './Icon';
 export * from './InlineError';
+export * from './KeyboardKey';
 export * from './Labelled';
 export * from './Layout';
 export * from './Link';
@@ -54,7 +55,7 @@ export * from './OtpInput';
 export * from './Page';
 export * from './PageActions';
 export * from './Pagination';
-export * from './Popper';
+export * from './Popover';
 export * from './PreventAutoComplete';
 export * from './ProgressBar';
 export * from './RadioButton';
@@ -69,6 +70,7 @@ export * from './Sheet';
 export * from './SkeletonBodyText';
 export * from './SkeletonCard';
 export * from './SkeletonDisplayText';
+export * from './SkeletonPage';
 export * from './Spinner';
 export * from './Splitter';
 export * from './Stack';

package/dist/components/types.d.ts

@@ -10,6 +10,11 @@ export interface ActionType {
     type?: ActionTypeType;
     icon?: string;
     disabled?: boolean;
+    /**
+     * Swaps the button's label for a spinner while the action is in flight.
+     * `disabled` already stops a second submit; this is what SAYS so.
+     */
+    loading?: boolean;
     url?: string;
     tooltip?: string;
     tooltipPosition?: ActionTooltipPositionType;

package/dist/lib.d.ts

@@ -1,5 +1,5 @@
 import { format } from './utils/format';
-import { setLocale } from './utils/date';
+import { setLocale, setTimezone, getTimezone } from './utils/date';
 import { setTheme, toggleTheme, getResolvedTheme, getThemePreference, onThemeChange, persistTheme } from './utils/theme';
 import { translate, setTranslations, addTranslations, setTranslationLocale, getTranslationLocale, getAvailableLocales, TranslationDictionary } from './utils/translate';
 import * as components from './components/all';
@@ -12,6 +12,7 @@ interface PluginOptions {
 }
 export * from './components/all';
 export { addCollection, addIcon } from '@iconify/vue';
+export { setTimezone, getTimezone } from './utils/date';
 export { translate, $t, setTranslations, addTranslations, setTranslationLocale, getTranslationLocale, getAvailableLocales, type TranslationDictionary } from './utils/translate';
 export { setTheme, toggleTheme, getResolvedTheme, getThemePreference, onThemeChange, persistTheme, type ThemeType, type ThemePreferenceType } from './utils/theme';
 export { listCustomThemes, getCustomTheme, saveCustomTheme, deleteCustomTheme, applyCustomTheme, clearCustomTheme, restoreCustomTheme, getActiveCustomThemeId, getResolvedTokenValue, exportCustomTheme, importCustomTheme, createThemeId, ThemeImportError, type CustomTheme } from './utils/customTheme';
@@ -29,6 +30,8 @@ declare const UI: {
     setLocale: typeof setLocale;
     translate: typeof translate;
     t: typeof translate;
+    setTimezone: typeof setTimezone;
+    getTimezone: typeof getTimezone;
     setTranslations: typeof setTranslations;
     addTranslations: typeof addTranslations;
     setTranslationLocale: typeof setTranslationLocale;

package/dist/reset.css

@@ -0,0 +1,73 @@
+/**
+ * Octans page reset — OPT IN.
+ *
+ *   import '@octans/ui/style.css'
+ *   import '@octans/ui/reset.css'   // only when Octans owns the whole page
+ *
+ * The main stylesheet deliberately resets nothing outside `.UIElement`, so the
+ * library can be dropped into a page it doesn't own without moving anything.
+ * That is the right default, and it is the wrong one for an app where Octans
+ * IS the UI: everything the app renders itself — the shell, the layout
+ * wrappers, the nav — silently falls back to browser defaults. Serif text,
+ * the user agent's 8px body margin, `content-box` sizing, and a body with no
+ * height so it grows past the viewport and earns a second scrollbar.
+ *
+ * This file is that missing layer and nothing more. It is deliberately small:
+ * it states the four things the UA gets wrong for a full-page app, and leaves
+ * everything else — image display, list markers, heading sizes — alone.
+ *
+ * THIS FILE IS PLAIN CSS AND IS COPIED TO dist/ VERBATIM. It is not part of
+ * the JS graph, so it cannot use Sass, and every token it reads carries a
+ * literal fallback for the case where it is imported without `style.css`.
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* `height` on the root so percentages below it resolve; `min-height` — not
+   `height` — on the body, so a document taller than the viewport still
+   scrolls normally instead of overflowing a fixed-height box. */
+html {
+  height: 100%;
+}
+
+body {
+  min-height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: var(--octans-surface-app, #eff1f5);
+  color: var(--octans-text, #2c333d);
+  font-family: var(
+    --octans-font,
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    'Noto Sans',
+    'Liberation Sans',
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji'
+  );
+  /* Matches `.UIElement`. Without it, app-authored markup renders at the UA's
+     16px directly beside 14px Octans components. */
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Form controls inherit neither font nor colour — the trap the skill
+   documents at component level, applied once at page level. `font: inherit`
+   rather than `font-family` alone, because size, weight and line-height are
+   all reset by the UA too. */
+button,
+input,
+select,
+textarea,
+optgroup {
+  font: inherit;
+  color: inherit;
+}