@semcore/base-trigger 16.0.0-prerelease.2 → 16.0.0-prerelease.20

package/lib/esm/style/base-trigger.shadow.css

@@ -0,0 +1,179 @@
+SBaseTrigger {
+  display: inline-block;
+  align-items: center;
+  justify-content: center;
+  line-height: normal;
+  position: relative;
+  touch-action: manipulation;
+  white-space: nowrap;
+  user-select: none;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  box-shadow: none;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+  overflow: visible;
+  text-align: center;
+  vertical-align: middle;
+  font-family: inherit;
+  cursor: pointer;
+
+  background: var(--intergalactic-bg-primary-neutral, #ffffff);
+
+  font-weight: var(--intergalactic-regular, 400);
+  border: 1px solid var(--intergalactic-border-primary, #c4c7cf);
+  color: var(--intergalactic-text-primary, #191b23);
+
+  &::-moz-focus-inner {
+    border: none;
+    padding: 0;
+  }
+
+  &:active,
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:focus-visible {
+    border: 1px solid var(--intergalactic-border-info-active, #006dca);
+  }
+
+  &:hover {
+    background-color: var(--intergalactic-bg-primary-neutral-hover, #f4f5f9);
+  }
+
+  &:active,
+  &[active] {
+    border-color: var(--intergalactic-border-info-active, #006dca);
+    background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
+  }
+}
+
+SBaseTrigger[disabled] {
+  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  cursor: default;
+  /* Disable link interactions */
+  pointer-events: none;
+}
+
+SInner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+SText {
+  display: inline;
+  /* disable-tokens-validator */
+  padding: 1px 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: var(--intergalactic-lh-200, 142%);
+  flex-grow: 1;
+  text-align: left;
+}
+
+SAddon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  pointer-events: none;
+}
+
+SBaseAddon {
+  width: 12px;
+  height: 12px;
+}
+
+SBaseTrigger[size='m'] {
+  min-width: 26px;
+  height: 28px;
+  border-radius: var(--intergalactic-control-rounded, 6px);
+  padding: 0 var(--intergalactic-spacing-2x, 8px);
+  font-size: var(--intergalactic-fs-200, 14px);
+
+  & SAddon {
+    &:not(:only-child):first-child {
+      margin-right: var(--intergalactic-spacing-2x, 8px);
+    }
+
+    &:not(:only-child):last-child {
+      margin-left: var(--intergalactic-spacing-2x, 8px);
+    }
+
+    &:only-child {
+      margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
+      margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
+    }
+  }
+}
+
+SBaseTrigger[size='l'] {
+  min-width: 32px;
+  height: 40px;
+  border-radius: var(--intergalactic-control-rounded, 6px);
+  padding: 0 var(--intergalactic-spacing-3x, 12px);
+  font-size: var(--intergalactic-fs-300, 16px);
+
+  & SAddon {
+    &:not(:only-child):first-child {
+      margin-right: var(--intergalactic-spacing-2x, 8px);
+    }
+
+    &:not(:only-child):last-child {
+      margin-left: var(--intergalactic-spacing-2x, 8px);
+    }
+
+    &:only-child {
+      margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
+      margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
+    }
+  }
+}
+
+SBaseTrigger[neighborLocation='right'] {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+SBaseTrigger[neighborLocation='both'] {
+  border-radius: 0;
+  /* disable-tokens-validator */
+  margin-left: -1px;
+}
+
+SBaseTrigger[neighborLocation='left'] {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  /* disable-tokens-validator */
+  margin-left: -1px;
+}
+
+SText[display-placeholder] {
+  color: var(--intergalactic-text-placeholder, #8a8e9b);
+}
+
+SBaseTrigger[state='valid'] {
+  border-color: var(--intergalactic-border-success-active, #007c65);
+}
+
+SBaseTrigger[state='invalid'] {
+  border-color: var(--intergalactic-border-critical-active, #d1002f);
+
+  &:focus-visible {
+    outline-color: var(--intergalactic-keyboard-focus-invalid-outline, rgba(255, 73, 83, 0.5));
+  }
+}
+
+SInvalidPattern[size='m'] {
+  margin-left: calc(-1 * var(--intergalactic-spacing-2x, 8px));
+}
+
+SInvalidPattern[size='l'] {
+  margin-left: calc(-1 * var(--intergalactic-spacing-3x, 12px));
+}

package/lib/esm/style/button-trigger.shadow.css

@@ -0,0 +1,8 @@
+SButtonAddon {
+  width: 12px;
+  height: 12px;
+}
+
+SButtonTriggerSpin {
+  fill: var(--intergalactic-icon-primary-neutral, #6c6e79);
+}

package/lib/esm/style/filter-trigger.shadow.css

@@ -0,0 +1,26 @@
+SFilterTrigger[selected] {
+  border-color: var(--intergalactic-border-info-active, #006dca);
+  background-color: var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));
+  color: var(--intergalactic-text-primary, #191b23);
+
+  &:hover {
+    background-color: var(--intergalactic-control-secondary-info-hover, rgba(0, 143, 248, 0.2));
+  }
+
+  &:active,
+  &[active] {
+    background-color: var(--intergalactic-control-secondary-info-active, rgba(0, 143, 248, 0.3));
+  }
+}
+
+SWrapper {
+  display: inline-flex;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+SCounter {
+  background-color: var(--intergalactic-bg-primary-info, #008ff8);
+}

package/lib/esm/style/link-trigger.shadow.css

@@ -0,0 +1,95 @@
+SLinkTrigger {
+  display: inline-flex;
+  align-items: center;
+  line-height: normal;
+  position: relative;
+  touch-action: manipulation;
+  white-space: nowrap;
+  user-select: none;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+  overflow: visible;
+  outline: 0;
+  vertical-align: middle;
+  cursor: pointer;
+  color: var(--intergalactic-text-link, #006dca);
+  background: none;
+  transition: color 0.15s ease-in-out;
+  border: 0;
+
+  &[active],
+  &:hover,
+  &:active {
+    color: var(--intergalactic-text-link-hover-active, #044792);
+
+    & SText {
+      border-color: currentColor;
+    }
+  }
+
+  & SText {
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-color: transparent;
+    transition: border-bottom-color 0.15s ease-in-out;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+
+SLinkTrigger[color] {
+  color: var(--color);
+
+  &:hover {
+    filter: brightness(0.8);
+  }
+}
+
+SLinkTrigger[disabled] {
+  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  cursor: default;
+  pointer-events: none;
+}
+
+SAddon,
+SLinkAddon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-bottom: var(--intergalactic-spacing-05x, 2px);
+
+  &:not(:only-child):first-child {
+    margin-right: var(--intergalactic-spacing-1x, 4px);
+  }
+
+  &:not(:only-child):last-child {
+    margin-left: var(--intergalactic-spacing-1x, 4px);
+  }
+}
+
+SLinkAddon {
+  width: 16px;
+  height: 16px;
+}
+
+SLinkTrigger[size='m'] {
+  font-size: var(--intergalactic-fs-200, 14px);
+}
+
+SLinkTrigger[size='l'] {
+  font-size: var(--intergalactic-fs-300, 16px);
+}
+
+@media (prefers-reduced-motion) {
+  SLinkTrigger {
+    transition: none;
+
+    & SText {
+      transition: none;
+    }
+  }
+}

package/lib/esm/translations/__intergalactic-dynamic-locales.mjs

@@ -1,33 +1,33 @@
-import r from "./de.json.mjs";
-import o from "./en.json.mjs";
-import m from "./es.json.mjs";
-import t from "./fr.json.mjs";
-import i from "./it.json.mjs";
-import p from "./ja.json.mjs";
-import f from "./ko.json.mjs";
-import e from "./nl.json.mjs";
-import s from "./pt.json.mjs";
-import a from "./tr.json.mjs";
-import l from "./vi.json.mjs";
-import v from "./zh.json.mjs";
-import d from "./pl.json.mjs";
-import n from "./sv.json.mjs";
-var B = {
-  de: r,
-  en: o,
-  es: m,
-  fr: t,
-  it: i,
-  ja: p,
-  ko: f,
-  nl: e,
-  pt: s,
-  tr: a,
-  vi: l,
-  zh: v,
-  pl: d,
-  sv: n
+import de from "./de.json.mjs";
+import en from "./en.json.mjs";
+import es from "./es.json.mjs";
+import fr from "./fr.json.mjs";
+import it from "./it.json.mjs";
+import ja from "./ja.json.mjs";
+import ko from "./ko.json.mjs";
+import nl from "./nl.json.mjs";
+import pt from "./pt.json.mjs";
+import tr from "./tr.json.mjs";
+import vi from "./vi.json.mjs";
+import zh from "./zh.json.mjs";
+import pl from "./pl.json.mjs";
+import sv from "./sv.json.mjs";
+var localizedMessages = {
+  de,
+  en,
+  es,
+  fr,
+  it,
+  ja,
+  ko,
+  nl,
+  pt,
+  tr,
+  vi,
+  zh,
+  pl,
+  sv
 };
 export {
-  B as localizedMessages
+  localizedMessages
 };

package/lib/esm/translations/de.json.mjs

@@ -1,9 +1,11 @@
-const e = "Löschen", t = "Filter", c = {
-  clear: e,
-  filter: t
+const clear = "Löschen";
+const filter = "Filter";
+const de = {
+  clear,
+  filter
 };
 export {
-  e as clear,
-  c as default,
-  t as filter
+  clear,
+  de as default,
+  filter
 };

package/lib/esm/translations/en.json.mjs

@@ -1,10 +1,12 @@
-const e = "Clear", r = "Filter", l = {
-  clear: e,
-  filter: r,
+const clear = "Clear";
+const filter = "Filter";
+const en = {
+  clear,
+  filter,
   "BaseTrigger.FilterTrigger.Counter.selected:aria-label": "selected"
 };
 export {
-  e as clear,
-  l as default,
-  r as filter
+  clear,
+  en as default,
+  filter
 };

package/lib/esm/translations/es.json.mjs

@@ -1,9 +1,11 @@
-const r = "Borrar", t = "Filtro", e = {
-  clear: r,
-  filter: t
+const clear = "Borrar";
+const filter = "Filtro";
+const es = {
+  clear,
+  filter
 };
 export {
-  r as clear,
-  e as default,
-  t as filter
+  clear,
+  es as default,
+  filter
 };

package/lib/esm/translations/fr.json.mjs

@@ -1,9 +1,11 @@
-const e = "Effacer", r = "Filtre", t = {
-  clear: e,
-  filter: r
+const clear = "Effacer";
+const filter = "Filtre";
+const fr = {
+  clear,
+  filter
 };
 export {
-  e as clear,
-  t as default,
-  r as filter
+  clear,
+  fr as default,
+  filter
 };

package/lib/esm/translations/it.json.mjs

@@ -1,9 +1,11 @@
-const t = "Pulisci", l = "Filtro", c = {
-  clear: t,
-  filter: l
+const clear = "Pulisci";
+const filter = "Filtro";
+const it = {
+  clear,
+  filter
 };
 export {
-  t as clear,
-  c as default,
-  l as filter
+  clear,
+  it as default,
+  filter
 };

package/lib/esm/translations/ja.json.mjs

@@ -1,9 +1,11 @@
-const t = "クリア", e = "フィルタ", a = {
-  clear: t,
-  filter: e
+const clear = "クリア";
+const filter = "フィルタ";
+const ja = {
+  clear,
+  filter
 };
 export {
-  t as clear,
-  a as default,
-  e as filter
+  clear,
+  ja as default,
+  filter
 };

package/lib/esm/translations/ko.json.mjs

@@ -1,9 +1,11 @@
-const t = "지우기", e = "필터", c = {
-  clear: t,
-  filter: e
+const clear = "지우기";
+const filter = "필터";
+const ko = {
+  clear,
+  filter
 };
 export {
-  t as clear,
-  c as default,
-  e as filter
+  clear,
+  ko as default,
+  filter
 };

package/lib/esm/translations/nl.json.mjs

@@ -1,9 +1,11 @@
-const e = "Wissen", t = "Filter", l = {
-  clear: e,
-  filter: t
+const clear = "Wissen";
+const filter = "Filter";
+const nl = {
+  clear,
+  filter
 };
 export {
-  e as clear,
-  l as default,
-  t as filter
+  clear,
+  nl as default,
+  filter
 };

package/lib/esm/translations/pl.json.mjs

@@ -1,9 +1,11 @@
-const t = "Wyczyść", l = "Filtr", c = {
-  clear: t,
-  filter: l
+const clear = "Wyczyść";
+const filter = "Filtr";
+const pl = {
+  clear,
+  filter
 };
 export {
-  t as clear,
-  c as default,
-  l as filter
+  clear,
+  pl as default,
+  filter
 };

package/lib/esm/translations/pt.json.mjs

@@ -1,9 +1,11 @@
-const t = "Limpar", r = "Filtro", e = {
-  clear: t,
-  filter: r
+const clear = "Limpar";
+const filter = "Filtro";
+const pt = {
+  clear,
+  filter
 };
 export {
-  t as clear,
-  e as default,
-  r as filter
+  clear,
+  pt as default,
+  filter
 };

package/lib/esm/translations/sv.json.mjs

@@ -1,9 +1,11 @@
-const e = "Rensa", t = "Filter", l = {
-  clear: e,
-  filter: t
+const clear = "Rensa";
+const filter = "Filter";
+const sv = {
+  clear,
+  filter
 };
 export {
-  e as clear,
-  l as default,
-  t as filter
+  clear,
+  sv as default,
+  filter
 };

package/lib/esm/translations/tr.json.mjs

@@ -1,9 +1,11 @@
-const e = "Temizle", t = "Filtre", l = {
-  clear: e,
-  filter: t
+const clear = "Temizle";
+const filter = "Filtre";
+const tr = {
+  clear,
+  filter
 };
 export {
-  e as clear,
-  l as default,
-  t as filter
+  clear,
+  tr as default,
+  filter
 };

package/lib/esm/translations/vi.json.mjs

@@ -1,9 +1,11 @@
-const t = "Xóa", c = "Lọc", e = {
-  clear: t,
-  filter: c
+const clear = "Xóa";
+const filter = "Lọc";
+const vi = {
+  clear,
+  filter
 };
 export {
-  t as clear,
-  e as default,
-  c as filter
+  clear,
+  vi as default,
+  filter
 };

package/lib/esm/translations/zh.json.mjs

@@ -1,9 +1,11 @@
-const t = "清除", e = "筛选器", c = {
-  clear: t,
-  filter: e
+const clear = "清除";
+const filter = "筛选器";
+const zh = {
+  clear,
+  filter
 };
 export {
-  t as clear,
-  c as default,
-  e as filter
+  clear,
+  zh as default,
+  filter
 };

package/lib/types/index.d.ts

@@ -1,16 +1,14 @@
 import React from 'react';
-import { UnknownProperties, Intergalactic, Root } from '@semcore/core';
+import { UnknownProperties, Intergalactic } from '@semcore/core';
 import { Box, BoxProps } from '@semcore/flex-box';
 import { DotProps } from '@semcore/dot';
 import { NeighborItemProps } from '@semcore/neighbor-location';
-import { KeyboardFocusProps } from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 import { WithAnimatedSizeEnhanceProps } from '@semcore/core/lib/utils/enhances/animatedSizeEnhance';
 
 /** @deprecated */
 export interface IBaseTriggerProps extends BaseTriggerProps, UnknownProperties {}
 export type BaseTriggerProps = BoxProps &
   NeighborItemProps &
-  KeyboardFocusProps &
   WithAnimatedSizeEnhanceProps & {
     /**
      * Trigger size