@umodeapporg/ui 0.27.0 → 0.29.0

package/dist/index.js

@@ -10,40 +10,42 @@ import { default as default9 } from "./components/Form/ControlledSwitch.js";
 import { default as default10 } from "./components/Form/ControlledTabs.js";
 import { default as default11 } from "./components/Form/ControlledTextarea.js";
 import { default as default12 } from "./components/Form/ControlledViewToggle.js";
-import { default as default13 } from "./components/Navigation/ControlledBreadcrumb.js";
-import { default as default14 } from "./components/Navigation/ErrorPage.js";
-import { default as default15 } from "./components/Navigation/LinkButton.js";
-import { default as default16 } from "./components/Navigation/PageTitle.js";
+import { default as default13 } from "./components/Form/FieldLabel.js";
+import { default as default14 } from "./components/Navigation/ControlledBreadcrumb.js";
+import { default as default15 } from "./components/Navigation/ErrorPage.js";
+import { default as default16 } from "./components/Navigation/LinkButton.js";
+import { default as default17 } from "./components/Navigation/PageTitle.js";
 import { PageTitleNavigationProvider, usePageTitleNavigation } from "./components/Navigation/PageTitleNavigationContext.js";
 import { UiNavigationProvider, useUiNavigation } from "./components/Navigation/UiNavigationContext.js";
-import { default as default17 } from "./components/Search/UnifiedSearchBar.js";
-import { default as default18 } from "./components/Shell/AppShell.js";
-import { default as default19 } from "./components/Shell/LanguageToggle.js";
+import { default as default18 } from "./components/Search/UnifiedSearchBar.js";
+import { default as default19 } from "./components/Shell/AppShell.js";
+import { default as default20 } from "./components/Shell/LanguageToggle.js";
 import { resolveSidebarItemId } from "./components/Shell/SidebarMenu.js";
-import { default as default20 } from "./components/Shell/ThemeToggle.js";
+import { default as default21 } from "./components/Shell/ThemeToggle.js";
 import { UiAccessProvider, useUiAccess } from "./components/UI/access/UiAccessContext.js";
-import { default as default21 } from "./components/UI/BaseDataCard.js";
-import { default as default22 } from "./components/UI/Chips/OutlinedChip.js";
-import { default as default23 } from "./components/UI/Colors.js";
-import { default as default24 } from "./components/UI/ColorSwatch.js";
-import { default as default25 } from "./components/UI/ControlledAccordion.js";
-import { default as default26 } from "./components/UI/ControlledCollapse.js";
-import { default as default27 } from "./components/UI/ControlledMenu.js";
-import { default as default28 } from "./components/UI/ControlledPopover.js";
-import { default as default29 } from "./components/UI/ControlledProgress.js";
-import { default as default30 } from "./components/UI/ControlledSlider.js";
-import { default as default31 } from "./components/UI/ControlledTooltip.js";
-import { default as default32 } from "./components/UI/CustomBadge.js";
-import { default as default33 } from "./components/UI/CustomCard.js";
-import { default as default34 } from "./components/UI/ImageMaskPainter/index.js";
-import { default as default35 } from "./components/UI/InformationCard.js";
-import { default as default36 } from "./components/UI/LoadingSpinner.js";
+import { default as default22 } from "./components/UI/BaseDataCard.js";
+import { default as default23 } from "./components/UI/Chips/OutlinedChip.js";
+import { default as default24 } from "./components/UI/Colors.js";
+import { default as default25 } from "./components/UI/ColorSwatch.js";
+import { default as default26 } from "./components/UI/ControlledAccordion.js";
+import { default as default27 } from "./components/UI/ControlledCollapse.js";
+import { default as default28 } from "./components/UI/ControlledMenu.js";
+import { default as default29 } from "./components/UI/ControlledPopover.js";
+import { default as default30 } from "./components/UI/ControlledProgress.js";
+import { default as default31 } from "./components/UI/ControlledSlider.js";
+import { default as default32 } from "./components/UI/ControlledTooltip.js";
+import { default as default33 } from "./components/UI/CustomBadge.js";
+import { default as default34 } from "./components/UI/CustomCard.js";
+import { default as default35 } from "./components/UI/ImageMaskPainter/index.js";
+import { default as default36 } from "./components/UI/InformationCard.js";
+import { default as default37 } from "./components/UI/LoadingSpinner.js";
 import { MaterialSymbol, combineClasses } from "./components/UI/MaterialSymbol/index.js";
-import { default as default37 } from "./components/UI/NoDataFound/index.js";
-import { default as default38 } from "./components/UI/SkeletonLoading.js";
-import { default as default39 } from "./components/UI/UserMenu.js";
+import { default as default38 } from "./components/UI/NoDataFound/index.js";
+import { default as default39 } from "./components/UI/SkeletonLoading.js";
+import { default as default40 } from "./components/UI/UserMenu.js";
 import { composeRefs } from "./helpers/composeRefs.js";
 import { LAYERED_SURFACE_ATTRIBUTE, LAYERED_SURFACE_DATA_ATTRIBUTE, LAYERED_SURFACE_SELECTOR, isPressOnLayeredSurface } from "./helpers/layeredSurfaces.js";
+import { mergeClasses } from "./helpers/mergeClasses.js";
 import { UI_THEME_SKINS, UI_THEME_SKIN_ATTRIBUTE, UI_THEME_SKIN_SCHEMES, isUiThemeSkin } from "./helpers/themeSkins.js";
 import { readThemeToken, useThemeChartTokens } from "./helpers/themeTokens.js";
 import { configureUiLogger, uiLogger } from "./helpers/uiLogger.js";
@@ -60,57 +62,58 @@ import { uiLocales } from "./locales/index.js";
 import { collapseVariants, createDrawerVariants, dialogVariants, fadeVariants, floatingVariants, scrimVariants, tooltipVariants } from "./motion/motionPresets.js";
 import { MOTION_OFFSET_PX, enterTransition, exitTransition, motionDuration, motionEase } from "./motion/motionTokens.js";
 export {
-  default18 as AppShell,
+  default19 as AppShell,
   BREAKPOINTS,
-  default21 as BaseDataCard,
-  default24 as ColorSwatch,
-  default23 as Colors,
-  default25 as ControlledAccordion,
-  default13 as ControlledBreadcrumb,
+  default22 as BaseDataCard,
+  default25 as ColorSwatch,
+  default24 as Colors,
+  default26 as ControlledAccordion,
+  default14 as ControlledBreadcrumb,
   default2 as ControlledButton,
   default3 as ControlledCheckbox,
-  default26 as ControlledCollapse,
+  default27 as ControlledCollapse,
   default4 as ControlledDialog,
   default5 as ControlledDrawer,
   default6 as ControlledImage,
   default7 as ControlledInput,
-  default27 as ControlledMenu,
-  default28 as ControlledPopover,
-  default29 as ControlledProgress,
+  default28 as ControlledMenu,
+  default29 as ControlledPopover,
+  default30 as ControlledProgress,
   default8 as ControlledRadio,
   ControlledSelect,
-  default30 as ControlledSlider,
+  default31 as ControlledSlider,
   default9 as ControlledSwitch,
   default10 as ControlledTabs,
   default11 as ControlledTextarea,
-  default31 as ControlledTooltip,
+  default32 as ControlledTooltip,
   default12 as ControlledViewToggle,
-  default32 as CustomBadge,
-  default33 as CustomCard,
-  default14 as ErrorPage,
-  default34 as ImageMaskPainter,
-  default35 as InformationCard,
+  default33 as CustomBadge,
+  default34 as CustomCard,
+  default15 as ErrorPage,
+  default13 as FieldLabel,
+  default35 as ImageMaskPainter,
+  default36 as InformationCard,
   LAYERED_SURFACE_ATTRIBUTE,
   LAYERED_SURFACE_DATA_ATTRIBUTE,
   LAYERED_SURFACE_SELECTOR,
-  default15 as LinkButton,
-  default36 as LoadingSpinner,
+  default16 as LinkButton,
+  default37 as LoadingSpinner,
   MOTION_OFFSET_PX,
   MaterialSymbol,
-  default37 as NoDataFound,
-  default22 as OutlinedChip,
-  default16 as PageTitle,
+  default38 as NoDataFound,
+  default23 as OutlinedChip,
+  default17 as PageTitle,
   PageTitleNavigationProvider,
-  default19 as ShellLanguageToggle,
-  default20 as ShellThemeToggle,
-  default38 as SkeletonLoading,
+  default20 as ShellLanguageToggle,
+  default21 as ShellThemeToggle,
+  default39 as SkeletonLoading,
   UI_THEME_SKINS,
   UI_THEME_SKIN_ATTRIBUTE,
   UI_THEME_SKIN_SCHEMES,
   UiAccessProvider,
   UiNavigationProvider,
-  default17 as UnifiedSearchBar,
-  default39 as UserMenu,
+  default18 as UnifiedSearchBar,
+  default40 as UserMenu,
   collapseVariants,
   combineClasses,
   composeRefs,
@@ -125,6 +128,7 @@ export {
   getButtonClassName,
   isPressOnLayeredSurface,
   isUiThemeSkin,
+  mergeClasses,
   motionDuration,
   motionEase,
   readThemeToken,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/locales/en/ui.json.d.ts

@@ -47,7 +47,8 @@ declare const _default: {
     "ok": "Ok",
     "gotIt": "Got it",
     "finishEditing": "Finish Editing",
-    "editColumn": "Edit {{column}}"
+    "editColumn": "Edit {{column}}",
+    "moreOptions": "More options"
   },
   "colorSwatch": {
     "noCode": "Color without a registered code"
@@ -66,7 +67,9 @@ declare const _default: {
     "enableTab": "Enable tab",
     "mustKeepOneEnabled": "At least one tab must remain enabled",
     "disableTab": "Disable tab",
-    "enableTabShort": "Enable tab"
+    "enableTabShort": "Enable tab",
+    "scrollLeft": "Scroll tabs left",
+    "scrollRight": "Scroll tabs right"
   },
   "createTask": {
     "newTask": "New task",
@@ -166,7 +169,9 @@ declare const _default: {
       "noTargets": "No item in the chosen scope.",
       "perItemHint": "Change only the cells you want. The rest stay as they are.",
       "itemColumn": "Item"
-    }
+    },
+    "expandRow": "Expand row",
+    "collapseRow": "Collapse row"
   },
   "dateRangePicker": {
     "selectPeriod": "Select a period",

package/dist/locales/en/ui.json.js

@@ -1,11 +1,11 @@
 const accordion = { "hide": "Hide", "expand": "Expand" };
-const actions = { "save": "Save", "cancel": "Cancel", "confirm": "Confirm", "delete": "Delete", "edit": "Edit", "create": "Create", "add": "Add", "remove": "Remove", "close": "Close", "back": "Back", "next": "Next", "previous": "Previous", "continue": "Continue", "submit": "Submit", "send": "Send", "search": "Search", "filter": "Filter", "clear": "Clear", "reset": "Reset", "reload": "Reload", "refresh": "Refresh", "apply": "Apply", "export": "Export", "import": "Import", "download": "Download", "upload": "Upload", "duplicate": "Duplicate", "select": "Select", "selectAll": "Select all", "deselectAll": "Deselect all", "viewDetails": "View details", "activate": "Activate", "deactivate": "Deactivate", "viewMore": "View more", "viewLess": "View less", "tryAgain": "Try again", "discardChanges": "Discard changes", "keepEditing": "Keep editing", "yes": "Yes", "no": "No", "ok": "Ok", "gotIt": "Got it", "finishEditing": "Finish Editing", "editColumn": "Edit {{column}}" };
+const actions = { "save": "Save", "cancel": "Cancel", "confirm": "Confirm", "delete": "Delete", "edit": "Edit", "create": "Create", "add": "Add", "remove": "Remove", "close": "Close", "back": "Back", "next": "Next", "previous": "Previous", "continue": "Continue", "submit": "Submit", "send": "Send", "search": "Search", "filter": "Filter", "clear": "Clear", "reset": "Reset", "reload": "Reload", "refresh": "Refresh", "apply": "Apply", "export": "Export", "import": "Import", "download": "Download", "upload": "Upload", "duplicate": "Duplicate", "select": "Select", "selectAll": "Select all", "deselectAll": "Deselect all", "viewDetails": "View details", "activate": "Activate", "deactivate": "Deactivate", "viewMore": "View more", "viewLess": "View less", "tryAgain": "Try again", "discardChanges": "Discard changes", "keepEditing": "Keep editing", "yes": "Yes", "no": "No", "ok": "Ok", "gotIt": "Got it", "finishEditing": "Finish Editing", "editColumn": "Edit {{column}}", "moreOptions": "More options" };
 const colorSwatch = { "noCode": "Color without a registered code" };
 const controlledDrawer = { "resizeHandle": "Drag to adjust the width" };
 const controlledSelect = { "loadingOptions": "Loading options", "noDataToShow": "No data to show", "moreItems": "+{{count}}" };
-const controlledTabs = { "renameTab": "Rename tab", "tabDisabled": "This tab is disabled", "enableTab": "Enable tab", "mustKeepOneEnabled": "At least one tab must remain enabled", "disableTab": "Disable tab", "enableTabShort": "Enable tab" };
+const controlledTabs = { "renameTab": "Rename tab", "tabDisabled": "This tab is disabled", "enableTab": "Enable tab", "mustKeepOneEnabled": "At least one tab must remain enabled", "disableTab": "Disable tab", "enableTabShort": "Enable tab", "scrollLeft": "Scroll tabs left", "scrollRight": "Scroll tabs right" };
 const createTask = { "newTask": "New task", "createTask": "Create Task", "newTaskTitle": "New Task", "taskName": "Title", "createdSuccess": "Task created successfully for {{date}}", "taskNamePlaceholder": "What is the task?", "taskType": "Task Type", "deadline": "Due date", "description": "Description", "descriptionPlaceholder": "Add a description...", "assignees": "Assignees", "saveTask": "Save Task", "cancel": "Cancel", "createdSuccessNoDate": "Task created successfully", "titleRequired": "Title is required", "taskTypeRequired": "Task type is required", "sidebarTitle": "Details", "rich": { "bold": "Bold", "italic": "Italic", "strikethrough": "Strikethrough", "link": "Link", "bulletList": "Bullet list", "numberedList": "Numbered list", "quote": "Quote", "indent": "Increase indent", "outdent": "Decrease indent", "textColor": "Text colour", "colors": { "default": "Default", "brand": "Purple", "info": "Blue", "success": "Green", "warning": "Amber", "danger": "Red", "accent": "Pink", "secondary": "Teal", "muted": "Grey" } }, "newTaskSubtitle": "Set the assignee and the due date", "createError": "Could not create the task", "requiredHint": "Fill in the title and the task type to save", "deadlinePlaceholder": "Select a date" };
-const dataTable = { "empty": "No records found", "error": "We could not load this list", "columns": "Columns", "viewList": "List", "viewCards": "Cards", "reorderColumn": "Reorder column", "restoreDefaultOrder": "Restore default order", "resizeColumn": "Resize column", "restoreDefaultWidths": "Restore default widths", "viewGrouped": "Grouping", "viewKanban": "Kanban", "addRow": "Add row", "removeRow": "Remove row", "editCell": "Edit", "save": "Save", "fillHandle": "Drag to fill", "editMode": { "enter": "Spreadsheet editing", "exit": "Exit editing", "inactiveHint": "Turns on cell editing: keyboard navigation, selection and drag to fill", "activeHint": "Cell editing is on. Clicking a row opens the record again once you exit" }, "bulkEdit": { "title": "Bulk edit", "subtitle": "Pick the field, the new value and which items it applies to.", "open": "Bulk edit", "hint": "Applies the same value to several items at once", "field": "Field", "newValue": "New value", "scopeLabel": "Apply to", "scopeLoaded": "All loaded", "scopePicked": "Pick items", "searchRows": "Search the list", "noRowsFound": "No item matches the search.", "selectAll_one": "Select the visible item", "selectAll_other": "Select the {{count}} visible", "confirm_one": "Apply to {{count}} item", "confirm_other": "Apply to {{count}} items", "confirmEmpty": "Pick the items", "subtitlePerItem": "Pick the fields and adjust each item's value; only what changed will be saved.", "modeLabel": "How to apply", "modeSame": "Same value", "modePerItem": "Values per item", "fields": "Fields", "confirmChanges_one": "Apply {{count}} change", "confirmChanges_other": "Apply {{count}} changes", "confirmNoChanges": "No changes", "pickFieldsHint": "Pick at least one field to edit per item.", "noTargets": "No item in the chosen scope.", "perItemHint": "Change only the cells you want. The rest stay as they are.", "itemColumn": "Item" } };
+const dataTable = { "empty": "No records found", "error": "We could not load this list", "columns": "Columns", "viewList": "List", "viewCards": "Cards", "reorderColumn": "Reorder column", "restoreDefaultOrder": "Restore default order", "resizeColumn": "Resize column", "restoreDefaultWidths": "Restore default widths", "viewGrouped": "Grouping", "viewKanban": "Kanban", "addRow": "Add row", "removeRow": "Remove row", "editCell": "Edit", "save": "Save", "fillHandle": "Drag to fill", "editMode": { "enter": "Spreadsheet editing", "exit": "Exit editing", "inactiveHint": "Turns on cell editing: keyboard navigation, selection and drag to fill", "activeHint": "Cell editing is on. Clicking a row opens the record again once you exit" }, "bulkEdit": { "title": "Bulk edit", "subtitle": "Pick the field, the new value and which items it applies to.", "open": "Bulk edit", "hint": "Applies the same value to several items at once", "field": "Field", "newValue": "New value", "scopeLabel": "Apply to", "scopeLoaded": "All loaded", "scopePicked": "Pick items", "searchRows": "Search the list", "noRowsFound": "No item matches the search.", "selectAll_one": "Select the visible item", "selectAll_other": "Select the {{count}} visible", "confirm_one": "Apply to {{count}} item", "confirm_other": "Apply to {{count}} items", "confirmEmpty": "Pick the items", "subtitlePerItem": "Pick the fields and adjust each item's value; only what changed will be saved.", "modeLabel": "How to apply", "modeSame": "Same value", "modePerItem": "Values per item", "fields": "Fields", "confirmChanges_one": "Apply {{count}} change", "confirmChanges_other": "Apply {{count}} changes", "confirmNoChanges": "No changes", "pickFieldsHint": "Pick at least one field to edit per item.", "noTargets": "No item in the chosen scope.", "perItemHint": "Change only the cells you want. The rest stay as they are.", "itemColumn": "Item" }, "expandRow": "Expand row", "collapseRow": "Collapse row" };
 const dateRangePicker = { "selectPeriod": "Select a period", "nowSelectEndDate": "Now select the end date" };
 const dates = { "today": "Today", "yesterday": "Yesterday", "tomorrow": "Tomorrow", "thisWeek": "This week", "lastWeek": "Last week", "thisMonth": "This month", "lastMonth": "Last month", "selectStartDate": "Select start date", "selectEndDate": "Select end date", "clearSelection": "Clear selection", "clearPeriod": "Clear selected period", "periodSelectedSuccess": "Period selected successfully" };
 const detailsTable = { "size": "Size", "quantity": "Qty" };

package/dist/locales/index.d.ts

@@ -50,6 +50,7 @@ export declare const uiLocales: {
             gotIt: string;
             finishEditing: string;
             editColumn: string;
+            moreOptions: string;
         };
         colorSwatch: {
             noCode: string;
@@ -69,6 +70,8 @@ export declare const uiLocales: {
             mustKeepOneEnabled: string;
             disableTab: string;
             enableTabShort: string;
+            scrollLeft: string;
+            scrollRight: string;
         };
         createTask: {
             newTask: string;
@@ -169,6 +172,8 @@ export declare const uiLocales: {
                 perItemHint: string;
                 itemColumn: string;
             };
+            expandRow: string;
+            collapseRow: string;
         };
         dateRangePicker: {
             selectPeriod: string;
@@ -683,6 +688,7 @@ export declare const uiLocales: {
             gotIt: string;
             finishEditing: string;
             editColumn: string;
+            moreOptions: string;
         };
         colorSwatch: {
             noCode: string;
@@ -702,6 +708,8 @@ export declare const uiLocales: {
             mustKeepOneEnabled: string;
             disableTab: string;
             enableTabShort: string;
+            scrollLeft: string;
+            scrollRight: string;
         };
         createTask: {
             newTask: string;
@@ -802,6 +810,8 @@ export declare const uiLocales: {
                 perItemHint: string;
                 itemColumn: string;
             };
+            expandRow: string;
+            collapseRow: string;
         };
         dateRangePicker: {
             selectPeriod: string;

package/dist/locales/pt/ui.json.d.ts

@@ -47,7 +47,8 @@ declare const _default: {
     "ok": "Ok",
     "gotIt": "Entendi",
     "finishEditing": "Finalizar Edição",
-    "editColumn": "Editar {{column}}"
+    "editColumn": "Editar {{column}}",
+    "moreOptions": "Mais opções"
   },
   "colorSwatch": {
     "noCode": "Cor sem código cadastrado"
@@ -66,7 +67,9 @@ declare const _default: {
     "enableTab": "Habilitar aba",
     "mustKeepOneEnabled": "É necessário manter ao menos uma aba habilitada",
     "disableTab": "Desabilitar tab",
-    "enableTabShort": "Habilitar tab"
+    "enableTabShort": "Habilitar tab",
+    "scrollLeft": "Rolar abas para a esquerda",
+    "scrollRight": "Rolar abas para a direita"
   },
   "createTask": {
     "newTask": "Nova tarefa",
@@ -166,7 +169,9 @@ declare const _default: {
       "noTargets": "Nenhum item no alcance escolhido.",
       "perItemHint": "Altere apenas as células desejadas. As demais permanecem como estão.",
       "itemColumn": "Item"
-    }
+    },
+    "expandRow": "Expandir linha",
+    "collapseRow": "Recolher linha"
   },
   "dateRangePicker": {
     "selectPeriod": "Selecione um período",

package/dist/locales/pt/ui.json.js

@@ -1,11 +1,11 @@
 const accordion = { "hide": "Ocultar", "expand": "Expandir" };
-const actions = { "save": "Salvar", "cancel": "Cancelar", "confirm": "Confirmar", "delete": "Excluir", "edit": "Editar", "create": "Criar", "add": "Adicionar", "remove": "Remover", "close": "Fechar", "back": "Voltar", "next": "Próximo", "previous": "Anterior", "continue": "Continuar", "submit": "Enviar", "send": "Enviar", "search": "Buscar", "filter": "Filtrar", "clear": "Limpar", "reset": "Redefinir", "reload": "Recarregar", "refresh": "Atualizar", "apply": "Aplicar", "export": "Exportar", "import": "Importar", "download": "Baixar", "upload": "Enviar arquivo", "duplicate": "Duplicar", "select": "Selecionar", "selectAll": "Selecionar tudo", "deselectAll": "Desmarcar tudo", "viewDetails": "Visualizar detalhes", "activate": "Ativar", "deactivate": "Inativar", "viewMore": "Ver mais", "viewLess": "Ver menos", "tryAgain": "Tentar novamente", "discardChanges": "Descartar alterações", "keepEditing": "Continuar editando", "yes": "Sim", "no": "Não", "ok": "Ok", "gotIt": "Entendi", "finishEditing": "Finalizar Edição", "editColumn": "Editar {{column}}" };
+const actions = { "save": "Salvar", "cancel": "Cancelar", "confirm": "Confirmar", "delete": "Excluir", "edit": "Editar", "create": "Criar", "add": "Adicionar", "remove": "Remover", "close": "Fechar", "back": "Voltar", "next": "Próximo", "previous": "Anterior", "continue": "Continuar", "submit": "Enviar", "send": "Enviar", "search": "Buscar", "filter": "Filtrar", "clear": "Limpar", "reset": "Redefinir", "reload": "Recarregar", "refresh": "Atualizar", "apply": "Aplicar", "export": "Exportar", "import": "Importar", "download": "Baixar", "upload": "Enviar arquivo", "duplicate": "Duplicar", "select": "Selecionar", "selectAll": "Selecionar tudo", "deselectAll": "Desmarcar tudo", "viewDetails": "Visualizar detalhes", "activate": "Ativar", "deactivate": "Inativar", "viewMore": "Ver mais", "viewLess": "Ver menos", "tryAgain": "Tentar novamente", "discardChanges": "Descartar alterações", "keepEditing": "Continuar editando", "yes": "Sim", "no": "Não", "ok": "Ok", "gotIt": "Entendi", "finishEditing": "Finalizar Edição", "editColumn": "Editar {{column}}", "moreOptions": "Mais opções" };
 const colorSwatch = { "noCode": "Cor sem código cadastrado" };
 const controlledDrawer = { "resizeHandle": "Arraste para ajustar a largura" };
 const controlledSelect = { "loadingOptions": "Carregando opções", "noDataToShow": "Não há dados para mostrar", "moreItems": "+{{count}}" };
-const controlledTabs = { "renameTab": "Renomear aba", "tabDisabled": "Esta aba está desabilitada", "enableTab": "Habilitar aba", "mustKeepOneEnabled": "É necessário manter ao menos uma aba habilitada", "disableTab": "Desabilitar tab", "enableTabShort": "Habilitar tab" };
+const controlledTabs = { "renameTab": "Renomear aba", "tabDisabled": "Esta aba está desabilitada", "enableTab": "Habilitar aba", "mustKeepOneEnabled": "É necessário manter ao menos uma aba habilitada", "disableTab": "Desabilitar tab", "enableTabShort": "Habilitar tab", "scrollLeft": "Rolar abas para a esquerda", "scrollRight": "Rolar abas para a direita" };
 const createTask = { "newTask": "Nova tarefa", "createTask": "Criar Tarefa", "newTaskTitle": "Nova Tarefa", "taskName": "Título", "createdSuccess": "Tarefa criada com sucesso para {{date}}", "taskNamePlaceholder": "Qual é a tarefa?", "taskType": "Tipo de Tarefa", "deadline": "Prazo", "description": "Descrição", "descriptionPlaceholder": "Adicione uma descrição...", "assignees": "Responsáveis", "saveTask": "Gravar Tarefa", "cancel": "Cancelar", "createdSuccessNoDate": "Tarefa criada com sucesso", "titleRequired": "O título é obrigatório", "taskTypeRequired": "O tipo de tarefa é obrigatório", "sidebarTitle": "Detalhes", "rich": { "bold": "Negrito", "italic": "Itálico", "strikethrough": "Tachado", "link": "Link", "bulletList": "Lista com marcador", "numberedList": "Lista numerada", "quote": "Citação", "indent": "Aumentar recuo", "outdent": "Diminuir recuo", "textColor": "Cor do texto", "colors": { "default": "Padrão", "brand": "Roxo", "info": "Azul", "success": "Verde", "warning": "Âmbar", "danger": "Vermelho", "accent": "Rosa", "secondary": "Turquesa", "muted": "Cinza" } }, "newTaskSubtitle": "Defina o responsável e o prazo", "createError": "Não foi possível criar a tarefa", "requiredHint": "Informe o título e o tipo de tarefa para gravar", "deadlinePlaceholder": "Selecionar data" };
-const dataTable = { "empty": "Nenhum registro encontrado", "error": "Não conseguimos carregar esta lista", "columns": "Colunas", "viewList": "Lista", "viewCards": "Cards", "reorderColumn": "Reordenar coluna", "restoreDefaultOrder": "Restaurar ordem padrão", "resizeColumn": "Redimensionar coluna", "restoreDefaultWidths": "Restaurar largura padrão", "viewGrouped": "Agrupamento", "viewKanban": "Kanban", "addRow": "Adicionar linha", "removeRow": "Remover linha", "editCell": "Editar", "save": "Salvar", "fillHandle": "Arraste para preencher", "editMode": { "enter": "Editar em planilha", "exit": "Sair da edição", "inactiveHint": "Ativa a edição em célula: navegação por teclado, seleção e preenchimento por arraste", "activeHint": "Edição em célula ativa. O clique na linha volta a abrir o registro quando você sair" }, "bulkEdit": { "title": "Editar em massa", "subtitle": "Escolha o campo, o novo valor e a quais itens aplicar.", "open": "Editar em massa", "hint": "Aplica um mesmo valor a vários itens de uma vez", "field": "Campo", "newValue": "Novo valor", "scopeLabel": "Aplicar a", "scopeLoaded": "Todos os carregados", "scopePicked": "Escolher itens", "searchRows": "Buscar na lista", "noRowsFound": "Nenhum item corresponde à busca.", "selectAll_one": "Selecionar o item visível", "selectAll_other": "Selecionar os {{count}} visíveis", "confirm_one": "Aplicar a {{count}} item", "confirm_other": "Aplicar a {{count}} itens", "confirmEmpty": "Selecione os itens", "subtitlePerItem": "Escolha os campos e ajuste o valor de cada item; só o que mudou será salvo.", "modeLabel": "Como aplicar", "modeSame": "Mesmo valor", "modePerItem": "Valores por item", "fields": "Campos", "confirmChanges_one": "Aplicar {{count}} alteração", "confirmChanges_other": "Aplicar {{count}} alterações", "confirmNoChanges": "Nenhuma alteração", "pickFieldsHint": "Selecione ao menos um campo para editar por item.", "noTargets": "Nenhum item no alcance escolhido.", "perItemHint": "Altere apenas as células desejadas. As demais permanecem como estão.", "itemColumn": "Item" } };
+const dataTable = { "empty": "Nenhum registro encontrado", "error": "Não conseguimos carregar esta lista", "columns": "Colunas", "viewList": "Lista", "viewCards": "Cards", "reorderColumn": "Reordenar coluna", "restoreDefaultOrder": "Restaurar ordem padrão", "resizeColumn": "Redimensionar coluna", "restoreDefaultWidths": "Restaurar largura padrão", "viewGrouped": "Agrupamento", "viewKanban": "Kanban", "addRow": "Adicionar linha", "removeRow": "Remover linha", "editCell": "Editar", "save": "Salvar", "fillHandle": "Arraste para preencher", "editMode": { "enter": "Editar em planilha", "exit": "Sair da edição", "inactiveHint": "Ativa a edição em célula: navegação por teclado, seleção e preenchimento por arraste", "activeHint": "Edição em célula ativa. O clique na linha volta a abrir o registro quando você sair" }, "bulkEdit": { "title": "Editar em massa", "subtitle": "Escolha o campo, o novo valor e a quais itens aplicar.", "open": "Editar em massa", "hint": "Aplica um mesmo valor a vários itens de uma vez", "field": "Campo", "newValue": "Novo valor", "scopeLabel": "Aplicar a", "scopeLoaded": "Todos os carregados", "scopePicked": "Escolher itens", "searchRows": "Buscar na lista", "noRowsFound": "Nenhum item corresponde à busca.", "selectAll_one": "Selecionar o item visível", "selectAll_other": "Selecionar os {{count}} visíveis", "confirm_one": "Aplicar a {{count}} item", "confirm_other": "Aplicar a {{count}} itens", "confirmEmpty": "Selecione os itens", "subtitlePerItem": "Escolha os campos e ajuste o valor de cada item; só o que mudou será salvo.", "modeLabel": "Como aplicar", "modeSame": "Mesmo valor", "modePerItem": "Valores por item", "fields": "Campos", "confirmChanges_one": "Aplicar {{count}} alteração", "confirmChanges_other": "Aplicar {{count}} alterações", "confirmNoChanges": "Nenhuma alteração", "pickFieldsHint": "Selecione ao menos um campo para editar por item.", "noTargets": "Nenhum item no alcance escolhido.", "perItemHint": "Altere apenas as células desejadas. As demais permanecem como estão.", "itemColumn": "Item" }, "expandRow": "Expandir linha", "collapseRow": "Recolher linha" };
 const dateRangePicker = { "selectPeriod": "Selecione um período", "nowSelectEndDate": "Agora selecione a data final" };
 const dates = { "today": "Hoje", "yesterday": "Ontem", "tomorrow": "Amanhã", "thisWeek": "Esta semana", "lastWeek": "Semana passada", "thisMonth": "Este mês", "lastMonth": "Mês passado", "selectStartDate": "Selecione a data inicial", "selectEndDate": "Selecione a data final", "clearSelection": "Limpar Seleção", "clearPeriod": "Limpar Período Selecionado", "periodSelectedSuccess": "Período selecionado com sucesso" };
 const detailsTable = { "size": "Tam", "quantity": "Qtd" };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umodeapporg/ui",
-  "version": "0.27.0",
+  "version": "0.29.0",
   "license": "UNLICENSED",
   "type": "module",
   "sideEffects": [

package/src/assets/styles/base.css

@@ -419,7 +419,6 @@ button:disabled,
   font-weight: normal;
   font-style: normal;
   font-size: 1.5rem;
-  display: inline-block;
   line-height: 1;
   text-transform: none;
   letter-spacing: normal;
@@ -432,6 +431,13 @@ button:disabled,
   font-feature-settings: 'liga';
 }
 
+/* Apart from the rule above and with no specificity, because this file comes after the Tailwind
+   layers: on the same footing, `display` here beat `hidden` and every responsive display class a
+   host put on a symbol. The face stays where it is, or preflight would reset it on a <button>. */
+:where(.material-symbols) {
+  display: inline-block;
+}
+
 /* Set by `watchIconFont` while the icon face is not usable: the glyph box keeps its size,
    and the ligature name never shows up as text in the layout. */
 :root[data-icon-font='loading'] .material-symbols,

package/tailwind-plugins/glass.js

@@ -31,21 +31,28 @@
 
 import plugin from 'tailwindcss/plugin';
 
+/**
+ * The prefixed twin goes first. Lightning CSS (the minifier of Next's Turbopack build) drops a
+ * standard declaration followed by its prefixed twin in the same rule, and Chrome ignores the
+ * prefixed one: the surface turns translucent without blur and nothing reports it. In this order
+ * Autoprefixer may also remove the twin, which is right: it does so when the host's browserslist
+ * no longer needs it, and adds it back when it does.
+ */
+const backdrop = (value) => ({ WebkitBackdropFilter: value, backdropFilter: value });
+
 const material = ({ alphaVar, blur, blurSm, saturateVar, shadow, highlightAlpha }) => ({
   backgroundColor: `rgb(var(--glass-bg) / var(${alphaVar}))`,
   // The sheen sits ON TOP of the base fill, so it only adds opacity and can never
   // undercut the validated text contrast.
   backgroundImage: 'var(--glass-sheen)',
-  backdropFilter: `blur(${blur}) saturate(var(${saturateVar}))`,
-  WebkitBackdropFilter: `blur(${blur}) saturate(var(${saturateVar}))`,
+  ...backdrop(`blur(${blur}) saturate(var(${saturateVar}))`),
   borderWidth: '1px',
   borderStyle: 'solid',
   borderColor: 'rgb(var(--glass-edge) / var(--glass-edge-alpha))',
   boxShadow: `var(${shadow}), inset 0 1px 0 0 rgb(var(--glass-highlight) / ${highlightAlpha})`,
 
   '@media (max-width: 639px)': {
-    backdropFilter: `blur(${blurSm}) saturate(var(${saturateVar}))`,
-    WebkitBackdropFilter: `blur(${blurSm}) saturate(var(${saturateVar}))`,
+    ...backdrop(`blur(${blurSm}) saturate(var(${saturateVar}))`),
   },
 
   // No backdrop-filter (older Firefox, some embedded webviews): translucency without blur
@@ -59,8 +66,7 @@ const material = ({ alphaVar, blur, blurSm, saturateVar, shadow, highlightAlpha
   '@media (prefers-reduced-transparency: reduce)': {
     backgroundColor: 'rgb(var(--color-surface-overlay))',
     backgroundImage: 'none',
-    backdropFilter: 'none',
-    WebkitBackdropFilter: 'none',
+    ...backdrop('none'),
   },
 });
 
@@ -97,16 +103,13 @@ export default plugin(({ addUtilities }) => {
     // ever sits on it; the blur is what separates the dialog from the page underneath.
     '.glass-scrim': {
       backgroundColor: 'var(--overlay)',
-      backdropFilter: 'blur(4px) saturate(105%)',
-      WebkitBackdropFilter: 'blur(4px) saturate(105%)',
+      ...backdrop('blur(4px) saturate(105%)'),
       '@media (max-width: 639px)': {
-        backdropFilter: 'blur(2px)',
-        WebkitBackdropFilter: 'blur(2px)',
+        ...backdrop('blur(2px)'),
       },
       '@media (prefers-reduced-transparency: reduce)': {
         backgroundColor: 'var(--overlay-strong)',
-        backdropFilter: 'none',
-        WebkitBackdropFilter: 'none',
+        ...backdrop('none'),
       },
     },
 
@@ -115,8 +118,7 @@ export default plugin(({ addUtilities }) => {
     // material and a hairline, so a 32px pill does not carry a dialog's elevation.
     '.glass-chip': {
       backgroundColor: 'rgb(var(--glass-bg) / 0.78)',
-      backdropFilter: 'blur(10px) saturate(var(--glass-saturate))',
-      WebkitBackdropFilter: 'blur(10px) saturate(var(--glass-saturate))',
+      ...backdrop('blur(10px) saturate(var(--glass-saturate))'),
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'rgb(var(--glass-edge) / var(--glass-edge-alpha))',
@@ -125,8 +127,7 @@ export default plugin(({ addUtilities }) => {
       },
       '@media (prefers-reduced-transparency: reduce)': {
         backgroundColor: 'rgb(var(--color-surface))',
-        backdropFilter: 'none',
-        WebkitBackdropFilter: 'none',
+        ...backdrop('none'),
       },
     },
 
@@ -134,34 +135,28 @@ export default plugin(({ addUtilities }) => {
     // own. Compose it with any tinted token when the surface is not neutral, e.g. a status
     // badge floating on a product photo: `glass-tint bg-warning-soft/95`.
     '.glass-tint': {
-      backdropFilter: 'blur(10px) saturate(var(--glass-saturate))',
-      WebkitBackdropFilter: 'blur(10px) saturate(var(--glass-saturate))',
+      ...backdrop('blur(10px) saturate(var(--glass-saturate))'),
       '@media (max-width: 639px)': {
-        backdropFilter: 'blur(6px) saturate(var(--glass-saturate))',
-        WebkitBackdropFilter: 'blur(6px) saturate(var(--glass-saturate))',
+        ...backdrop('blur(6px) saturate(var(--glass-saturate))'),
       },
       '@media (prefers-reduced-transparency: reduce)': {
-        backdropFilter: 'none',
-        WebkitBackdropFilter: 'none',
+        ...backdrop('none'),
       },
     },
 
     // A thin veil that dims content underneath while something loads. Barely any blur on
     // purpose: it must read as "busy", not as a floating panel.
     '.glass-veil': {
-      backdropFilter: 'blur(2px) saturate(100%)',
-      WebkitBackdropFilter: 'blur(2px) saturate(100%)',
+      ...backdrop('blur(2px) saturate(100%)'),
       '@media (prefers-reduced-transparency: reduce)': {
-        backdropFilter: 'none',
-        WebkitBackdropFilter: 'none',
+        ...backdrop('none'),
       },
     },
 
     // Opt out on a surface that inherited glass from a shared component.
     '.glass-none': {
       backgroundColor: 'rgb(var(--color-surface))',
-      backdropFilter: 'none',
-      WebkitBackdropFilter: 'none',
+      ...backdrop('none'),
     },
   });
 });