@octans/ui 1.0.0 → 1.3.0

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;
+}