@nubisco/ui 5.31.1 → 5.32.1

package/src/styles/_theme-api.scss

@@ -54,6 +54,7 @@
 @use 'sass:string';
 @use 'accent' as accent;
 @use 'logic' as logic;
+@use 'logic/ink' as ink;
 @use 'variables/categories' as categories;
 
 /// The tints every palette colour is expanded into, matching the library's own
@@ -177,6 +178,7 @@ $a11y-roles:
   @if $palette != () or map.keys($light) != () or $light != () {
     [data-nb-theme='#{$id}'] {
       @include _palette($palette);
+      @include _ink-reset($light);
       @include _emit($light, $palette);
     }
   }
@@ -187,31 +189,47 @@ $a11y-roles:
    * single-attribute block above, so the dark half wins inside a dark document
    * regardless of the order the stylesheets happen to be concatenated in.
    */
-  @if map.keys($dark) != () or $dark != () {
+  @if map.keys($dark) != () or $dark != () or _has-ink($light) {
     .dark[data-nb-theme='#{$id}'],
     .dark [data-nb-theme='#{$id}'] {
-      @include _ink-reset($dark);
+      @include _ink-reset($dark, $light);
       @include _emit($dark, $palette);
     }
   }
 }
 
-/// The variants whose ink the dark theme lifts toward white.
-$_ink-variants: primary, secondary, success, info, warning, danger;
+/// Whether a token map colours any variant that ink applies to.
+@function _has-ink($tokens) {
+  @each $variant in ink.$variants {
+    @if map.has-key($tokens, $variant) {
+      @return true;
+    }
+  }
+  @return false;
+}
 
-/// Turns the dark ink lift off for every variant a theme gives its own dark
-/// colour.
+/// Turns the ink lift off for every variant a theme gives its own colour.
 ///
-/// The library's dark lift (`--nb-c-<variant>-ink-lift`, see
-/// `logic/_ink.scss`) is sized for the library's own dark colours. A theme that
-/// picks a dark colour has picked it for contrast already (every category accent
-/// clears AA on all four dark layers), and lifting it further would only wash it
-/// out. Emitted before the theme's own keys, so a theme that does want a lift
+/// The library's lifts (`--nb-c-<variant>-ink-lift`, see `logic/_ink.scss`)
+/// are sized for the library's own colours. A theme that picks a colour has
+/// picked it for contrast already (every category accent clears AA on all four
+/// layers of its mode), and moving it further would only wash it out or muddy
+/// it. Emitted before the theme's own keys, so a theme that does want a lift
 /// can still pass `primary-ink-lift` and win.
-@mixin _ink-reset($tokens) {
-  @each $variant in $_ink-variants {
+///
+/// The light scope applies in both modes, so its reset would also reach a dark
+/// document. A variant the theme colours only in light therefore gets the
+/// library's dark lift back in the dark scope: its light colour is what shows
+/// there, and it was not picked for a dark layer.
+///
+/// @param {Map} $tokens - the mode being emitted
+/// @param {Map} $light - the light map, when emitting the dark scope
+@mixin _ink-reset($tokens, $light: ()) {
+  @each $variant in ink.$variants {
     @if map.has-key($tokens, $variant) {
       --nb-c-#{$variant}-ink-lift: 0%;
+    } @else if map.has-key($light, $variant) {
+      --nb-c-#{$variant}-ink-lift: #{map.get(ink.$dark-lifts, $variant) or 0%};
     }
   }
 }

package/src/styles/_theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:color';
 @use 'sass:map';
 @use 'accent';
+@use 'logic/ink';
 @use 'config';
 @use 'variables/layout';
 @use 'variables/colors';
@@ -168,6 +169,13 @@
     --nb-c-secondary-active: var(--nb-c-plain-black-850);
     --nb-c-secondary-active-a11y: var(--nb-c-plain-black-850-a11y);
 
+    // Ink: a semantic colour drawn as text or an outline straight onto a
+    // layer (an outlined button, a drop-zone label) moves away from the
+    // surface, toward black here and toward white in .dark, by a per-variant
+    // lift sized for WCAG AA on every layer. See `logic/_ink.scss`.
+    --nb-c-ink-toward: var(--nb-c-black);
+    @include ink.lifts(ink.$light-lifts);
+
     --nb-c-success: var(--nb-c-emerald-reflection-600);
     --nb-c-success-a11y: var(--nb-c-emerald-reflection-600-a11y);
     --nb-c-success-hover: var(--nb-c-emerald-reflection-700);
@@ -668,12 +676,14 @@
     // fighting the components' scoped-style specificity.
     --nb-shell-panel-header-height: calc(var(--nb-base-unit) * 3.5); // 28px
     --nb-shell-panel-gap: 1px; // hairline separator, not a spacing step
-    --nb-shell-panel-bg: var(--nb-c-surface);
-    --nb-shell-panel-border: 1px solid var(--nb-c-border);
+    // --nb-shell-panel-bg, -border and -header-border are deliberately NOT
+    // declared here. Their defaults read the panel's own layer (`--nb-c-surface`
+    // and `--nb-c-border` on the panel), which only resolves on the panel
+    // element: declared at :root they froze to layer 1 and every NbShellPanel
+    // painted layer 1 wherever it sat. ShellPanel.vue writes the fallbacks.
     // Transparent by default so the header reads as part of the panel; set it
     // when a product wants the header bar tinted against its own content.
     --nb-shell-panel-header-bg: transparent;
-    --nb-shell-panel-header-border: 1px solid var(--nb-c-border);
     // How much of the body a bottom panel claims at its intermediate (`default`)
     // size. A share rather than a length: the point of that size is to show part
     // of the panel and part of the page at once, which has to hold at any window
@@ -912,18 +922,9 @@
         colors.get-color('chicken-comb', 400)
       )};
 
-    // Ink lift: how far each semantic colour moves toward white when it is
-    // drawn as text or an outline straight onto a dark layer (an outlined
-    // button, a drop-zone label). See `logic/_ink.scss`. Each value is the
-    // smallest whole lift that clears WCAG AA on all four dark layers and on
-    // the 14% pressed wash, plus two points of margin. The light theme
-    // declares none, so ink there is the colour itself.
-    --nb-c-primary-ink-lift: 48%;
-    --nb-c-secondary-ink-lift: 56%;
-    --nb-c-success-ink-lift: 21%;
-    --nb-c-info-ink-lift: 43%;
-    --nb-c-warning-ink-lift: 6%;
-    --nb-c-danger-ink-lift: 46%;
+    // Ink moves toward white on a dark layer. Lifts in `logic/_ink.scss`.
+    --nb-c-ink-toward: var(--nb-c-white);
+    @include ink.lifts(ink.$dark-lifts);
 
     // Component states
     --nb-c-component-inactive: #{colors.get-color('nouveau-gray', 500)};

package/src/styles/grid/_mixins.scss

@@ -4,11 +4,25 @@
 
 @mixin generate-styles($prefix) {
   // grid
+  //
+  // A span is its share of the row minus its share of the gaps, so spans that
+  // add up to the full row fit beside each other with the parent's gap
+  // between them: 8 + 8 is (100% - gap) / 2 each. The parent tells its
+  // children its gap and whether it is laid out as a row (only a row's gap is
+  // horizontal) through two custom properties it sets on them directly, below.
   @each $column in common.$var-columns-top {
     &.#{$prefix}grid-#{$column} {
-      flex-basis: calc((100% * #{$column}) / #{grid.$grid-columns});
-      max-width: calc((100% * #{$column}) / #{grid.$grid-columns});
-      min-width: calc((100% * #{$column}) / #{grid.$grid-columns});
+      $span: calc(
+        (100% * #{$column}) /
+          #{grid.$grid-columns} - var(--nb-grid-parent-gap, 0px) *
+          var(--nb-grid-parent-row, 1) *
+          #{grid.$grid-columns -
+          $column} /
+          #{grid.$grid-columns}
+      );
+      flex-basis: $span;
+      max-width: $span;
+      min-width: $span;
     }
   }
   @each $column in common.$var-columns-bottom {
@@ -22,10 +36,16 @@
     flex-direction: row;
     // width: 100%;
     // overflow-x: hidden;
+    > * {
+      --nb-grid-parent-row: 1;
+    }
   }
   &.#{$prefix}col {
     flex-direction: column;
     // width: 100%;
+    > * {
+      --nb-grid-parent-row: 0;
+    }
   }
 
   // wrap
@@ -112,6 +132,9 @@
   @each $gap in map.keys(grid.$gap-ratios) {
     &.#{$prefix}gap-#{$gap} {
       gap: map.get(grid.$gap-ratios, $gap);
+      > * {
+        --nb-grid-parent-gap: #{map.get(grid.$gap-ratios, $gap)};
+      }
     }
   }
 }

package/src/styles/grid/index.scss

@@ -9,6 +9,11 @@
 @mixin defaults-root-styles {
   box-sizing: border-box;
   display: flex;
+  // A grid without a gap class has no gap for its spans to share, whatever
+  // the grid around it uses. Its gap class, being more specific, sets it.
+  > * {
+    --nb-grid-parent-gap: 0px;
+  }
   &.flex {
     flex: 1;
   }

package/src/styles/logic/_ink.scss

@@ -1,34 +1,73 @@
+@use 'sass:map';
+
 /// A semantic colour drawn as ink: text, an outline or an icon set directly on a
 /// surface, with no fill of its own behind it.
 ///
 /// The semantic colours (`--nb-c-primary`, `--nb-c-secondary`, ...) are picked
 /// first as FILLS, with their `-a11y` foreground on top. Drawn straight onto a
-/// surface they are a different pair, and in the dark theme several of them do
-/// not survive it: the dark secondary is a mid grey chosen to carry white text,
-/// and as the label of an outlined button it measured 1.21:1 to 2.15:1 against
-/// the four dark layers.
+/// surface they are a different pair, and several of them do not survive it.
+/// In dark mode the secondary is a mid grey chosen to carry white text, and as
+/// the label of an outlined button it measured 1.21:1 to 2.15:1 on the dark
+/// layers. In light mode the warning amber measured 1.75:1 to 2.06:1, and the
+/// success green 2.69:1 to 3.16:1.
 ///
-/// So ink lifts the colour toward white by `--nb-c-<variant>-ink-lift`. The
-/// light theme does not declare the lift, so the fallback of 0% returns the
-/// colour unchanged and light mode is pixel-identical. The dark theme declares
-/// one per variant, each the smallest lift that clears WCAG AA (4.5:1) on all
-/// four dark layers and on the 14% wash an outlined button paints when pressed.
-/// `tests/inkContrast.test.ts` measures it.
+/// So ink moves the colour away from the surface: toward
+/// `--nb-c-ink-toward` (black in light mode, white in dark) by
+/// `--nb-c-<variant>-ink-lift`. Each lift is the smallest whole value that
+/// clears WCAG AA (4.5:1) on all four layers of its theme, and on the 8% hover
+/// and 14% pressed washes an outlined button paints under its own label, plus
+/// two points of margin. A variant that already clears it has no lift.
+/// `tests/inkContrast.test.ts` measures every one.
 ///
 /// The mix is resolved on the element that paints, not at `:root`, so a product
 /// that re-points `--nb-c-primary` (on `:root` or on a themed subtree) gets ITS
-/// primary lifted, never the library's. A named theme that sets its own dark
-/// colour for a variant resets that variant's lift to 0%, because it chose that
-/// colour for contrast already (see `theme()` in `_theme-api.scss`).
+/// primary moved, never the library's. A named theme that sets its own colour
+/// for a variant resets that variant's lift to 0% in that mode, because it chose
+/// that colour for contrast already (see `theme()` in `_theme-api.scss`).
 ///
+/// @group @nubisco/colors
+
+/// Light-theme lifts, toward black.
+/// @type Map
+$light-lifts: (
+  success: 34%,
+  info: 14%,
+  warning: 46%,
+  danger: 22%,
+);
+
+/// Dark-theme lifts, toward white.
+/// @type Map
+$dark-lifts: (
+  primary: 48%,
+  secondary: 56%,
+  success: 21%,
+  info: 43%,
+  warning: 6%,
+  danger: 46%,
+);
+
+/// The variants ink applies to.
+$variants: primary, secondary, success, info, warning, danger;
+
+/// Declares one theme's lifts. Variants absent from the map get 0%, written
+/// out, so a theme scope never inherits the other mode's value.
+///
+/// @param {Map} $lifts - `$light-lifts` or `$dark-lifts`
+@mixin lifts($lifts) {
+  @each $variant in $variants {
+    --nb-c-#{$variant}-ink-lift: #{map.get($lifts, $variant) or 0%};
+  }
+}
+
 /// @param {String} $variant - primary, secondary, success, info, warning or danger
 /// @return {String} a `color-mix()` expression
 /// @access public
-/// @group @nubisco/colors
 @function ink($variant) {
   @return color-mix(
     in srgb,
     var(--nb-c-#{$variant}),
-    var(--nb-c-white) var(--nb-c-#{$variant}-ink-lift, 0%)
+    var(--nb-c-ink-toward, var(--nb-c-white))
+      var(--nb-c-#{$variant}-ink-lift, 0%)
   );
 }

package/dist/Card-B4NIRb5n.cjs

@@ -1 +0,0 @@
-require(`./chunk-D-qHiVGv.cjs`);const e=require(`./_plugin-vue_export-helper-tagjRzOz.cjs`),t=require(`./Icon-C8R_r_In.cjs`),n=require(`./composables/useSurfaceLayer.composable.cjs`);let r=require(`vue`);var i={key:0,class:`nb-card__icon`},a={class:`nb-card__head`},o={class:`nb-card__title`},s={key:0,class:`nb-card__subtitle`},c={key:1,class:`nb-card__body`},l={key:2,class:`nb-card__footer`},u=(0,r.defineComponent)({__name:`Card`,props:{title:{default:``},subtitle:{default:``},icon:{default:void 0},href:{default:void 0},target:{default:void 0},clickable:{type:Boolean,default:!1},selected:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:[`select`],setup(e,{emit:u}){let d=e,f=u,{layerProps:p}=n.useSurfaceLayer(),m=(0,r.computed)(()=>!!d.href&&!d.disabled),h=(0,r.computed)(()=>(m.value||d.clickable)&&!d.disabled),g=(0,r.computed)(()=>m.value?`a`:(d.clickable,`div`)),_=(0,r.computed)(()=>m.value?{href:d.href,target:d.target,rel:d.target===`_blank`?`noopener`:void 0}:d.clickable&&!d.disabled?{role:`button`,tabindex:0,"aria-pressed":d.selected?!0:void 0}:{});function v(){!d.clickable||d.disabled||m.value||f(`select`)}function y(e){!d.clickable||d.disabled||m.value||e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),f(`select`))}return(n,u)=>((0,r.openBlock)(),(0,r.createBlock)((0,r.resolveDynamicComponent)(g.value),(0,r.mergeProps)({class:[`nb-card`,{"nb-card--interactive":h.value,"nb-card--selected":e.selected,"nb-card--disabled":e.disabled}]},{..._.value,...(0,r.unref)(p)},{onClick:v,onKeydown:y}),{default:(0,r.withCtx)(()=>[e.icon||n.$slots.icon?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,i,[(0,r.renderSlot)(n.$slots,`icon`,{},()=>[(0,r.createVNode)(t.t,{name:e.icon,size:20,"aria-hidden":`true`},null,8,[`name`])],!0)])):(0,r.createCommentVNode)(``,!0),(0,r.createElementVNode)(`div`,a,[(0,r.createElementVNode)(`span`,o,[(0,r.renderSlot)(n.$slots,`title`,{},()=>[(0,r.createTextVNode)((0,r.toDisplayString)(e.title),1)],!0)]),e.subtitle||n.$slots.subtitle?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,s,[(0,r.renderSlot)(n.$slots,`subtitle`,{},()=>[(0,r.createTextVNode)((0,r.toDisplayString)(e.subtitle),1)],!0)])):(0,r.createCommentVNode)(``,!0)]),n.$slots.default?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,c,[(0,r.renderSlot)(n.$slots,`default`,{},void 0,!0)])):(0,r.createCommentVNode)(``,!0),n.$slots.footer?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,l,[(0,r.renderSlot)(n.$slots,`footer`,{},void 0,!0)])):(0,r.createCommentVNode)(``,!0)]),_:3},16,[`class`]))}}),d=e.t(u,[[`__scopeId`,`data-v-1accde78`]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return d}});

package/dist/ProgressBar-DPMCRM1f.cjs

@@ -1 +0,0 @@
-const e=require(`./chunk-D-qHiVGv.cjs`),t=require(`./_plugin-vue_export-helper-tagjRzOz.cjs`),n=require(`./Icon-C8R_r_In.cjs`),r=require(`./Label-CVCNXFn1.cjs`),i=require(`./Message-VfpaGblO.cjs`);let a=require(`vue`),o=require(`@nubisco/ui/icons/warning-circle`);o=e.n(o);let s=require(`@nubisco/ui/icons/check-circle`);s=e.n(s);var c=function(e){return e.Small=`sm`,e.Medium=`md`,e}(c||{}),l=function(e){return e.Active=`active`,e.Finished=`finished`,e.Error=`error`,e}(l||{}),u={key:0,class:`nb-progress-bar__header`},d=[`aria-label`,`aria-valuemax`,`aria-valuenow`],f=(0,a.defineComponent)({__name:`ProgressBar`,props:{value:{default:void 0},max:{default:100},helper:{default:void 0},size:{default:c.Medium},status:{default:l.Active},id:{default:`progress-bar`},label:{}},setup(e){let t=e,c=(0,a.computed)(()=>t.value==null&&t.status===l.Active),f=(0,a.computed)(()=>t.status===l.Active?t.value==null||t.max<=0?0:Math.min(Math.max(t.value/t.max,0),1):1),p=(0,a.computed)(()=>c.value?void 0:f.value*t.max),m=(0,a.computed)(()=>[`nb-progress-bar`,`nb-progress-bar--${t.size}`,`nb-progress-bar--${t.status}`,{"nb-progress-bar--indeterminate":c.value}]),h=(0,a.computed)(()=>({transform:`scaleX(${f.value})`})),g=(0,a.computed)(()=>t.status===l.Finished?s:t.status===l.Error?o:null),_=(0,a.computed)(()=>t.status===l.Error?i.n.Error:i.n.Helper);return(t,o)=>((0,a.openBlock)(),(0,a.createElementBlock)(`div`,{class:(0,a.normalizeClass)(m.value)},[e.label?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,u,[(0,a.createVNode)(r.t,null,{default:(0,a.withCtx)(()=>[(0,a.createTextVNode)((0,a.toDisplayString)(e.label),1)]),_:1}),g.value?((0,a.openBlock)(),(0,a.createBlock)(n.t,{key:0,name:g.value,size:14,class:`nb-progress-bar__status-icon`},null,8,[`name`])):(0,a.createCommentVNode)(``,!0)])):(0,a.createCommentVNode)(``,!0),(0,a.createElementVNode)(`div`,{class:`nb-progress-bar__track`,role:`progressbar`,"aria-label":e.label,"aria-valuemin":`0`,"aria-valuemax":e.max,"aria-valuenow":p.value},[(0,a.createElementVNode)(`div`,{class:`nb-progress-bar__bar`,style:(0,a.normalizeStyle)(h.value)},null,4)],8,d),e.helper?((0,a.openBlock)(),(0,a.createBlock)(i.t,{key:1,variant:_.value,class:`nb-progress-bar__message`},{default:(0,a.withCtx)(()=>[(0,a.createTextVNode)((0,a.toDisplayString)(e.helper),1)]),_:1},8,[`variant`])):(0,a.createCommentVNode)(``,!0)],2))}}),p=t.t(f,[[`__scopeId`,`data-v-5c8dd315`]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return p}});

package/dist/TextInput-DmCYZgG0.cjs

@@ -1,2 +0,0 @@
-require(`./chunk-D-qHiVGv.cjs`);const e=require(`./_plugin-vue_export-helper-tagjRzOz.cjs`),t=require(`./Grid-D8c0StGs.cjs`),n=require(`./Label-CVCNXFn1.cjs`),r=require(`./Message-VfpaGblO.cjs`);let i=require(`vue`);var a={key:0,class:`nb-text-input__overlay-wrap`},o=[`innerHTML`],s=[`id`,`value`,`placeholder`,`disabled`,`readonly`,`name`,`maxlength`],c=[`id`,`value`,`placeholder`,`disabled`,`readonly`,`name`,`maxlength`],l=[`id`,`placeholder`,`disabled`,`readonly`,`name`,`maxlength`,`rows`],u=[`id`,`type`,`placeholder`,`disabled`,`readonly`,`required`,`name`,`min`,`max`,`step`,`maxlength`],d={key:2,class:`nb-text-input__actions`},f={key:0,class:`nb-text-input__inner-header`},p=[`for`],m={key:0,class:`nb-text-input__asterisk`,"aria-hidden":`true`},h=[`id`,`type`,`placeholder`,`disabled`,`readonly`,`required`,`name`,`min`,`max`,`step`,`maxlength`],g=(0,i.defineComponent)({inheritAttrs:!1,__name:`TextInput`,props:(0,i.mergeModels)({type:{default:`text`},min:{default:void 0},max:{default:void 0},step:{default:void 0},maxlength:{default:void 0},multiline:{type:Boolean,default:!1},rows:{default:3},highlight:{type:Function,default:void 0},readonly:{type:Boolean,default:!1},placeholder:{default:``},name:{default:``},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},id:{default:void 0},label:{default:``},error:{default:``},warning:{default:``},helper:{default:``},variant:{default:`default`},size:{default:`md`}},{modelValue:{default:``},modelModifiers:{}}),emits:[`update:modelValue`],setup(e,{expose:g}){let _=e,v=(0,i.useModel)(e,`modelValue`),y=(0,i.ref)(null),b=(0,i.ref)(null);g({focus:()=>y.value?.focus(),blur:()=>y.value?.blur(),nativeEl:y});let x=(0,i.ref)(!1),S=`nb-input-${(0,i.useId)()}`,C=(0,i.computed)(()=>_.id??S),w=(0,i.computed)(()=>!!_.highlight),T=(0,i.computed)(()=>{if(!_.highlight)return``;let e=String(v.value??``);return _.highlight(e)+`
-`});function E(){b.value&&y.value&&(b.value.scrollTop=y.value.scrollTop)}(0,i.watch)(T,()=>(0,i.nextTick)(E));let D=(0,i.computed)(()=>_.error?`error`:_.warning?`warning`:`helper`),O=(0,i.computed)(()=>_.error||_.warning||_.helper||``),k=(0,i.computed)(()=>!!O.value),A=(0,i.computed)(()=>({"nb-text-input__field-wrapper--focused":x.value,"nb-text-input__field-wrapper--error":!!_.error,"nb-text-input__field-wrapper--warning":!_.error&&!!_.warning,"nb-text-input__field-wrapper--disabled":_.disabled,"nb-text-input__field-wrapper--readonly":_.readonly,"nb-text-input__field-wrapper--overlay":w.value,"nb-text-input__field-wrapper--multiline":_.multiline}));return(g,_)=>((0,i.openBlock)(),(0,i.createBlock)(t.t,{dir:`col`,class:(0,i.normalizeClass)([`nb-text-input`,`nb-text-input--${e.variant}`,`nb-text-input--${e.size}`,{"nb-text-input--multiline":e.multiline}])},{default:(0,i.withCtx)(()=>[e.variant===`default`?((0,i.openBlock)(),(0,i.createElementBlock)(i.Fragment,{key:0},[g.$slots.label?(0,i.renderSlot)(g.$slots,`label`,{key:0},void 0,!0):e.label?((0,i.openBlock)(),(0,i.createBlock)(n.t,{key:1,for:C.value,required:e.required,disabled:e.disabled},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(e.label),1)]),_:1},8,[`for`,`required`,`disabled`])):(0,i.createCommentVNode)(``,!0),(0,i.createElementVNode)(`div`,{class:(0,i.normalizeClass)([`nb-text-input__field-wrapper`,A.value])},[(0,i.renderSlot)(g.$slots,`leading`,{},void 0,!0),w.value?((0,i.openBlock)(),(0,i.createElementBlock)(`div`,a,[(0,i.createElementVNode)(`div`,{ref_key:`mirrorRef`,ref:b,class:`nb-text-input__mirror`,"aria-hidden":`true`,innerHTML:T.value},null,8,o),e.multiline?((0,i.openBlock)(),(0,i.createElementBlock)(`textarea`,(0,i.mergeProps)({key:0,id:C.value,ref_key:`nativeRef`,ref:y},g.$attrs,{class:`nb-text-input__field--transparent`,value:v.value,placeholder:e.placeholder,disabled:e.disabled,readonly:e.readonly,name:e.name,maxlength:e.maxlength,spellcheck:`false`,autocomplete:`off`,autocorrect:`off`,onInput:_[0]||=e=>v.value=e.target.value,onFocus:_[1]||=e=>x.value=!0,onBlur:_[2]||=e=>x.value=!1,onScroll:E}),null,16,s)):((0,i.openBlock)(),(0,i.createElementBlock)(`input`,(0,i.mergeProps)({key:1,id:C.value,ref_key:`nativeRef`,ref:y},g.$attrs,{type:`text`,class:`nb-text-input__field--transparent`,value:v.value,placeholder:e.placeholder,disabled:e.disabled,readonly:e.readonly,name:e.name,maxlength:e.maxlength,spellcheck:`false`,onInput:_[3]||=e=>v.value=e.target.value,onFocus:_[4]||=e=>x.value=!0,onBlur:_[5]||=e=>x.value=!1}),null,16,c))])):((0,i.openBlock)(),(0,i.createElementBlock)(i.Fragment,{key:1},[e.multiline?(0,i.withDirectives)(((0,i.openBlock)(),(0,i.createElementBlock)(`textarea`,(0,i.mergeProps)({key:0,id:C.value,ref_key:`nativeRef`,ref:y},g.$attrs,{"onUpdate:modelValue":_[6]||=e=>v.value=e,class:`nb-text-input__field`,placeholder:e.placeholder,disabled:e.disabled,readonly:e.readonly,name:e.name,maxlength:e.maxlength,rows:e.rows,onFocus:_[7]||=e=>x.value=!0,onBlur:_[8]||=e=>x.value=!1}),null,16,l)),[[i.vModelText,v.value]]):(0,i.withDirectives)(((0,i.openBlock)(),(0,i.createElementBlock)(`input`,(0,i.mergeProps)({key:1,id:C.value,ref_key:`nativeRef`,ref:y},g.$attrs,{"onUpdate:modelValue":_[9]||=e=>v.value=e,class:`nb-text-input__field`,type:e.type,placeholder:e.placeholder,disabled:e.disabled,readonly:e.readonly,required:e.required,name:e.name,min:e.min,max:e.max,step:e.step,maxlength:e.maxlength,onFocus:_[10]||=e=>x.value=!0,onBlur:_[11]||=e=>x.value=!1}),null,16,u)),[[i.vModelDynamic,v.value]])],64)),(0,i.renderSlot)(g.$slots,`trailing`,{},void 0,!0),g.$slots.actions?((0,i.openBlock)(),(0,i.createElementBlock)(`div`,d,[(0,i.renderSlot)(g.$slots,`actions`,{},void 0,!0)])):(0,i.createCommentVNode)(``,!0)],2),k.value?((0,i.openBlock)(),(0,i.createBlock)(r.t,{key:2,variant:D.value,class:`nb-text-input__message`},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(O.value),1)]),_:1},8,[`variant`])):(0,i.createCommentVNode)(``,!0),(0,i.renderSlot)(g.$slots,`dropdown`,{},void 0,!0)],64)):e.variant===`fluid`?((0,i.openBlock)(),(0,i.createElementBlock)(`div`,{key:1,class:(0,i.normalizeClass)([`nb-text-input__field-wrapper`,A.value])},[e.label||g.$slots.label?((0,i.openBlock)(),(0,i.createElementBlock)(`div`,f,[g.$slots.label?(0,i.renderSlot)(g.$slots,`label`,{key:0},void 0,!0):((0,i.openBlock)(),(0,i.createElementBlock)(`label`,{key:1,for:C.value,class:(0,i.normalizeClass)([`nb-text-input__inner-label`,{"nb-text-input__inner-label--required":e.required}])},[(0,i.createTextVNode)((0,i.toDisplayString)(e.label)+` `,1),e.required?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,m,`*`)):(0,i.createCommentVNode)(``,!0)],10,p)),k.value?((0,i.openBlock)(),(0,i.createBlock)(r.t,{key:2,variant:D.value,"icon-only":``,class:`nb-text-input__inner-message`},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(O.value),1)]),_:1},8,[`variant`])):(0,i.createCommentVNode)(``,!0)])):(0,i.createCommentVNode)(``,!0),(0,i.withDirectives)((0,i.createElementVNode)(`input`,(0,i.mergeProps)({id:C.value,ref_key:`nativeRef`,ref:y},g.$attrs,{"onUpdate:modelValue":_[12]||=e=>v.value=e,class:`nb-text-input__field`,type:e.type,placeholder:e.placeholder,disabled:e.disabled,readonly:e.readonly,required:e.required,name:e.name,min:e.min,max:e.max,step:e.step,maxlength:e.maxlength,onFocus:_[13]||=e=>x.value=!0,onBlur:_[14]||=e=>x.value=!1}),null,16,h),[[i.vModelDynamic,v.value]])],2)):(0,i.createCommentVNode)(``,!0)]),_:3},8,[`class`]))}}),_=e.t(g,[[`__scopeId`,`data-v-2e908d7d`]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return _}});

package/dist/TextInput-HwIhSOJD.js

@@ -1,295 +0,0 @@
-import { t as e } from "./_plugin-vue_export-helper-O4QQSku4.js";
-import { t } from "./Grid-XtnH-vr_.js";
-import { t as n } from "./Label-ciCAG21-.js";
-import { t as r } from "./Message-Cecz48PA.js";
-import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as d, mergeModels as f, mergeProps as p, nextTick as m, normalizeClass as h, openBlock as g, ref as _, renderSlot as v, toDisplayString as y, useId as b, useModel as x, vModelDynamic as S, vModelText as C, watch as w, withCtx as T, withDirectives as E } from "vue";
-//#region src/components/TextInput.vue?vue&type=script&setup=true&lang.ts
-var D = {
-	key: 0,
-	class: "nb-text-input__overlay-wrap"
-}, O = ["innerHTML"], k = [
-	"id",
-	"value",
-	"placeholder",
-	"disabled",
-	"readonly",
-	"name",
-	"maxlength"
-], A = [
-	"id",
-	"value",
-	"placeholder",
-	"disabled",
-	"readonly",
-	"name",
-	"maxlength"
-], j = [
-	"id",
-	"placeholder",
-	"disabled",
-	"readonly",
-	"name",
-	"maxlength",
-	"rows"
-], M = [
-	"id",
-	"type",
-	"placeholder",
-	"disabled",
-	"readonly",
-	"required",
-	"name",
-	"min",
-	"max",
-	"step",
-	"maxlength"
-], N = {
-	key: 2,
-	class: "nb-text-input__actions"
-}, P = {
-	key: 0,
-	class: "nb-text-input__inner-header"
-}, F = ["for"], I = {
-	key: 0,
-	class: "nb-text-input__asterisk",
-	"aria-hidden": "true"
-}, L = [
-	"id",
-	"type",
-	"placeholder",
-	"disabled",
-	"readonly",
-	"required",
-	"name",
-	"min",
-	"max",
-	"step",
-	"maxlength"
-], R = /* @__PURE__ */ e(/* @__PURE__ */ d({
-	inheritAttrs: !1,
-	__name: "TextInput",
-	props: /* @__PURE__ */ f({
-		type: { default: "text" },
-		min: { default: void 0 },
-		max: { default: void 0 },
-		step: { default: void 0 },
-		maxlength: { default: void 0 },
-		multiline: {
-			type: Boolean,
-			default: !1
-		},
-		rows: { default: 3 },
-		highlight: {
-			type: Function,
-			default: void 0
-		},
-		readonly: {
-			type: Boolean,
-			default: !1
-		},
-		placeholder: { default: "" },
-		name: { default: "" },
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		required: {
-			type: Boolean,
-			default: !1
-		},
-		id: { default: void 0 },
-		label: { default: "" },
-		error: { default: "" },
-		warning: { default: "" },
-		helper: { default: "" },
-		variant: { default: "default" },
-		size: { default: "md" }
-	}, {
-		modelValue: { default: "" },
-		modelModifiers: {}
-	}),
-	emits: ["update:modelValue"],
-	setup(e, { expose: d }) {
-		let f = e, R = x(e, "modelValue"), z = _(null), B = _(null);
-		d({
-			focus: () => z.value?.focus(),
-			blur: () => z.value?.blur(),
-			nativeEl: z
-		});
-		let V = _(!1), H = `nb-input-${b()}`, U = a(() => f.id ?? H), W = a(() => !!f.highlight), G = a(() => {
-			if (!f.highlight) return "";
-			let e = String(R.value ?? "");
-			return f.highlight(e) + "\n";
-		});
-		function K() {
-			B.value && z.value && (B.value.scrollTop = z.value.scrollTop);
-		}
-		w(G, () => m(K));
-		let q = a(() => f.error ? "error" : f.warning ? "warning" : "helper"), J = a(() => f.error || f.warning || f.helper || ""), Y = a(() => !!J.value), X = a(() => ({
-			"nb-text-input__field-wrapper--focused": V.value,
-			"nb-text-input__field-wrapper--error": !!f.error,
-			"nb-text-input__field-wrapper--warning": !f.error && !!f.warning,
-			"nb-text-input__field-wrapper--disabled": f.disabled,
-			"nb-text-input__field-wrapper--readonly": f.readonly,
-			"nb-text-input__field-wrapper--overlay": W.value,
-			"nb-text-input__field-wrapper--multiline": f.multiline
-		}));
-		return (a, d) => (g(), o(t, {
-			dir: "col",
-			class: h([
-				"nb-text-input",
-				`nb-text-input--${e.variant}`,
-				`nb-text-input--${e.size}`,
-				{ "nb-text-input--multiline": e.multiline }
-			])
-		}, {
-			default: T(() => [e.variant === "default" ? (g(), c(i, { key: 0 }, [
-				a.$slots.label ? v(a.$slots, "label", { key: 0 }, void 0, !0) : e.label ? (g(), o(n, {
-					key: 1,
-					for: U.value,
-					required: e.required,
-					disabled: e.disabled
-				}, {
-					default: T(() => [u(y(e.label), 1)]),
-					_: 1
-				}, 8, [
-					"for",
-					"required",
-					"disabled"
-				])) : s("", !0),
-				l("div", { class: h(["nb-text-input__field-wrapper", X.value]) }, [
-					v(a.$slots, "leading", {}, void 0, !0),
-					W.value ? (g(), c("div", D, [l("div", {
-						ref_key: "mirrorRef",
-						ref: B,
-						class: "nb-text-input__mirror",
-						"aria-hidden": "true",
-						innerHTML: G.value
-					}, null, 8, O), e.multiline ? (g(), c("textarea", p({
-						key: 0,
-						id: U.value,
-						ref_key: "nativeRef",
-						ref: z
-					}, a.$attrs, {
-						class: "nb-text-input__field--transparent",
-						value: R.value,
-						placeholder: e.placeholder,
-						disabled: e.disabled,
-						readonly: e.readonly,
-						name: e.name,
-						maxlength: e.maxlength,
-						spellcheck: "false",
-						autocomplete: "off",
-						autocorrect: "off",
-						onInput: d[0] ||= (e) => R.value = e.target.value,
-						onFocus: d[1] ||= (e) => V.value = !0,
-						onBlur: d[2] ||= (e) => V.value = !1,
-						onScroll: K
-					}), null, 16, k)) : (g(), c("input", p({
-						key: 1,
-						id: U.value,
-						ref_key: "nativeRef",
-						ref: z
-					}, a.$attrs, {
-						type: "text",
-						class: "nb-text-input__field--transparent",
-						value: R.value,
-						placeholder: e.placeholder,
-						disabled: e.disabled,
-						readonly: e.readonly,
-						name: e.name,
-						maxlength: e.maxlength,
-						spellcheck: "false",
-						onInput: d[3] ||= (e) => R.value = e.target.value,
-						onFocus: d[4] ||= (e) => V.value = !0,
-						onBlur: d[5] ||= (e) => V.value = !1
-					}), null, 16, A))])) : (g(), c(i, { key: 1 }, [e.multiline ? E((g(), c("textarea", p({
-						key: 0,
-						id: U.value,
-						ref_key: "nativeRef",
-						ref: z
-					}, a.$attrs, {
-						"onUpdate:modelValue": d[6] ||= (e) => R.value = e,
-						class: "nb-text-input__field",
-						placeholder: e.placeholder,
-						disabled: e.disabled,
-						readonly: e.readonly,
-						name: e.name,
-						maxlength: e.maxlength,
-						rows: e.rows,
-						onFocus: d[7] ||= (e) => V.value = !0,
-						onBlur: d[8] ||= (e) => V.value = !1
-					}), null, 16, j)), [[C, R.value]]) : E((g(), c("input", p({
-						key: 1,
-						id: U.value,
-						ref_key: "nativeRef",
-						ref: z
-					}, a.$attrs, {
-						"onUpdate:modelValue": d[9] ||= (e) => R.value = e,
-						class: "nb-text-input__field",
-						type: e.type,
-						placeholder: e.placeholder,
-						disabled: e.disabled,
-						readonly: e.readonly,
-						required: e.required,
-						name: e.name,
-						min: e.min,
-						max: e.max,
-						step: e.step,
-						maxlength: e.maxlength,
-						onFocus: d[10] ||= (e) => V.value = !0,
-						onBlur: d[11] ||= (e) => V.value = !1
-					}), null, 16, M)), [[S, R.value]])], 64)),
-					v(a.$slots, "trailing", {}, void 0, !0),
-					a.$slots.actions ? (g(), c("div", N, [v(a.$slots, "actions", {}, void 0, !0)])) : s("", !0)
-				], 2),
-				Y.value ? (g(), o(r, {
-					key: 2,
-					variant: q.value,
-					class: "nb-text-input__message"
-				}, {
-					default: T(() => [u(y(J.value), 1)]),
-					_: 1
-				}, 8, ["variant"])) : s("", !0),
-				v(a.$slots, "dropdown", {}, void 0, !0)
-			], 64)) : e.variant === "fluid" ? (g(), c("div", {
-				key: 1,
-				class: h(["nb-text-input__field-wrapper", X.value])
-			}, [e.label || a.$slots.label ? (g(), c("div", P, [a.$slots.label ? v(a.$slots, "label", { key: 0 }, void 0, !0) : (g(), c("label", {
-				key: 1,
-				for: U.value,
-				class: h(["nb-text-input__inner-label", { "nb-text-input__inner-label--required": e.required }])
-			}, [u(y(e.label) + " ", 1), e.required ? (g(), c("span", I, "*")) : s("", !0)], 10, F)), Y.value ? (g(), o(r, {
-				key: 2,
-				variant: q.value,
-				"icon-only": "",
-				class: "nb-text-input__inner-message"
-			}, {
-				default: T(() => [u(y(J.value), 1)]),
-				_: 1
-			}, 8, ["variant"])) : s("", !0)])) : s("", !0), E(l("input", p({
-				id: U.value,
-				ref_key: "nativeRef",
-				ref: z
-			}, a.$attrs, {
-				"onUpdate:modelValue": d[12] ||= (e) => R.value = e,
-				class: "nb-text-input__field",
-				type: e.type,
-				placeholder: e.placeholder,
-				disabled: e.disabled,
-				readonly: e.readonly,
-				required: e.required,
-				name: e.name,
-				min: e.min,
-				max: e.max,
-				step: e.step,
-				maxlength: e.maxlength,
-				onFocus: d[13] ||= (e) => V.value = !0,
-				onBlur: d[14] ||= (e) => V.value = !1
-			}), null, 16, L), [[S, R.value]])], 2)) : s("", !0)]),
-			_: 3
-		}, 8, ["class"]));
-	}
-}), [["__scopeId", "data-v-2e908d7d"]]);
-//#endregion
-export { R as t };