@haiilo/catalyst 0.14.2 → 0.15.1

package/dist/collection/components/cat-select-remote-test/cat-select-remote-test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cat-select-remote-test.js","sourceRoot":"","sources":["../../../src/components/cat-select-remote-test/cat-select-remote-test.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host } from '@stencil/core';\nimport { of, delay } from 'rxjs';\n\ninterface User {\n  id: string;\n  firstName: string;\n  lastName: string;\n  desc: string;\n}\n\ninterface Country {\n  id: string;\n  country: string;\n  capital?: string;\n}\n\n@Component({\n  tag: 'cat-select-remote-test',\n  shadow: true\n})\nexport class CatSelectRemoteTest {\n  private multipleSelect?: HTMLCatSelectRemoteElement;\n  private singleSelect?: HTMLCatSelectRemoteElement;\n\n  componentDidLoad(): void {\n    this.multipleSelect?.connect({\n      resolve: (ids: string[]) => {\n        console.info(`Resolving data... (${ids.join(', ')})`);\n        return of(\n          ids.map(id => ({\n            id,\n            firstName: 'John',\n            lastName: `Doe (${id})`,\n            desc: 'resolved'\n          }))\n        ).pipe(delay(500));\n      },\n      retrieve: (term: string, page: number) => {\n        console.info(`Retrieving data... (\"${term}\", ${page})`);\n        return term === 'no'\n          ? of({ last: true, content: [], totalElements: 0 })\n          : of({\n              last: false,\n              totalElements: 10000,\n              content: Array.from({ length: 10 }, (_, i) => ({\n                id: '' + (i + page * 10),\n                firstName: 'John',\n                lastName: `Doe (${i + page * 10})`,\n                desc: `\"${term}\": page ${page}`\n              }))\n            }).pipe(delay(500));\n      },\n      render: (user: User) => ({\n        label: `${user.firstName} ${user.lastName}`,\n        description: user.desc\n      })\n    });\n    this.singleSelect?.connect({\n      resolve: (ids: string[]) => {\n        console.info(`Resolving data... (${ids.join(', ')})`);\n        return of(ids.map(id => countries.find(value => value.id === id))).pipe(delay(500));\n      },\n      retrieve: (term: string, page: number) => {\n        console.info(`Retrieving data... (\"${term}\", ${page})`);\n        const filter = countries.filter(\n          value =>\n            value.country.toLowerCase().indexOf(term.toLowerCase()) === 0 ||\n            value.capital?.toLowerCase().indexOf(term.toLowerCase()) === 0\n        );\n        const slice = filter.slice(page * 10, page * 10 + 10);\n        return of({\n          last: slice.length < 10,\n          totalElements: filter.length,\n          content: slice\n        }).pipe(delay(500));\n      },\n      render: (country: Country) => ({\n        label: country.country,\n        description: country.capital || 'No capital'\n      })\n    });\n  }\n\n  render() {\n    return (\n      <Host style={{ display: 'flex', gap: '0.5rem', flexDirection: 'column' }}>\n        <cat-select-remote\n          label=\"Multiple Select\"\n          hint=\"This is a hint!\"\n          ref={el => (this.multipleSelect = el)}\n          value={['1']}\n          placeholder=\"Hello World\"\n          onCatChange={e => console.log('Multiple', e)}\n          onCatBlur={e => console.log('Multiple blur', e)}\n          multiple\n          clearable\n        >\n          <span slot=\"hint\">Searching for \"no\" -{'>'} no options are returned!</span>\n        </cat-select-remote>\n        <cat-select-remote\n          label=\"Single Select\"\n          hint=\"This is a hint!\"\n          ref={el => (this.singleSelect = el)}\n          value={'1'}\n          placeholder=\"Search for a country or capital\"\n          onCatChange={e => console.log('Single', e)}\n          onCatBlur={e => console.log('Single blur', e)}\n          clearable\n        ></cat-select-remote>\n      </Host>\n    );\n  }\n}\n\nconst countries: Country[] = [\n  {\n    id: '0',\n    country:\n      'Afghanistan Extra extra large extra large extra large extra large extra large extra large extra large extra large extra large extra large extra large extra large extra large extra large ',\n    capital: 'Kabul'\n  },\n  {\n    id: '1',\n    country: 'Albania',\n    capital: 'Tirana'\n  },\n  {\n    id: '2',\n    country: 'Algeria',\n    capital: 'Alger'\n  },\n  {\n    id: '3',\n    country: 'American Samoa',\n    capital: 'Fagatogo'\n  },\n  {\n    id: '4',\n    country: 'Andorra',\n    capital: 'Andorra la Vella'\n  },\n  {\n    id: '5',\n    country: 'Angola',\n    capital: 'Luanda'\n  },\n  {\n    id: '6',\n    country: 'Anguilla',\n    capital: 'The Valley'\n  },\n  {\n    id: '7',\n    country: 'Antarctica'\n  },\n  {\n    id: '8',\n    country: 'Antigua and Barbuda',\n    capital: \"Saint John's\"\n  },\n  {\n    id: '9',\n    country: 'Argentina',\n    capital: 'Buenos Aires'\n  },\n  {\n    id: '10',\n    country: 'Armenia',\n    capital: 'Yerevan'\n  },\n  {\n    id: '11',\n    country: 'Aruba',\n    capital: 'Oranjestad'\n  },\n  {\n    id: '12',\n    country: 'Australia',\n    capital: 'Canberra'\n  },\n  {\n    id: '13',\n    country: 'Austria',\n    capital: 'Wien'\n  },\n  {\n    id: '14',\n    country: 'Azerbaijan',\n    capital: 'Baku'\n  },\n  {\n    id: '15',\n    country: 'Bahamas',\n    capital: 'Nassau'\n  },\n  {\n    id: '16',\n    country: 'Bahrain',\n    capital: 'al-Manama'\n  },\n  {\n    id: '17',\n    country: 'Bangladesh',\n    capital: 'Dhaka'\n  },\n  {\n    id: '18',\n    country: 'Barbados',\n    capital: 'Bridgetown'\n  },\n  {\n    id: '19',\n    country: 'Belarus',\n    capital: 'Minsk'\n  },\n  {\n    id: '20',\n    country: 'Belgium',\n    capital: 'Bruxelles [Brussel]'\n  },\n  {\n    id: '21',\n    country: 'Belize',\n    capital: 'Belmopan'\n  },\n  {\n    id: '22',\n    country: 'Benin',\n    capital: 'Porto-Novo'\n  },\n  {\n    id: '23',\n    country: 'Bermuda',\n    capital: 'Hamilton'\n  },\n  {\n    id: '24',\n    country: 'Bhutan',\n    capital: 'Thimphu'\n  },\n  {\n    id: '25',\n    country: 'Bolivia',\n    capital: 'La Paz'\n  },\n  {\n    id: '26',\n    country: 'Bosnia and Herzegovina',\n    capital: 'Sarajevo'\n  },\n  {\n    id: '27',\n    country: 'Botswana',\n    capital: 'Gaborone'\n  },\n  {\n    id: '28',\n    country: 'Bouvet Island'\n  },\n  {\n    id: '29',\n    country: 'Brazil',\n    capital: 'Brasília'\n  },\n  {\n    id: '30',\n    country: 'British Indian Ocean Territory'\n  },\n  {\n    id: '31',\n    country: 'Brunei',\n    capital: 'Bandar Seri Begawan'\n  },\n  {\n    id: '32',\n    country: 'Bulgaria',\n    capital: 'Sofia'\n  },\n  {\n    id: '33',\n    country: 'Burkina Faso',\n    capital: 'Ouagadougou'\n  },\n  {\n    id: '34',\n    country: 'Burundi',\n    capital: 'Bujumbura'\n  },\n  {\n    id: '35',\n    country: 'Cambodia',\n    capital: 'Phnom Penh'\n  },\n  {\n    id: '36',\n    country: 'Cameroon',\n    capital: 'Yaound'\n  },\n  {\n    id: '37',\n    country: 'Canada',\n    capital: 'Ottawa'\n  },\n  {\n    id: '38',\n    country: 'Cape Verde',\n    capital: 'Praia'\n  },\n  {\n    id: '39',\n    country: 'Cayman Islands',\n    capital: 'George Town'\n  },\n  {\n    id: '40',\n    country: 'Central African Republic',\n    capital: 'Bangui'\n  },\n  {\n    id: '41',\n    country: 'Chad',\n    capital: \"N'Djam\"\n  },\n  {\n    id: '42',\n    country: 'Chile',\n    capital: 'Santiago de Chile'\n  },\n  {\n    id: '43',\n    country: 'China',\n    capital: 'Peking'\n  },\n  {\n    id: '44',\n    country: 'Christmas Island',\n    capital: 'Flying Fish Cove'\n  },\n  {\n    id: '45',\n    country: 'Cocos (Keeling) Islands',\n    capital: 'West Island'\n  },\n  {\n    id: '46',\n    country: 'Colombia',\n    capital: 'Santaf'\n  },\n  {\n    id: '47',\n    country: 'Comoros',\n    capital: 'Moroni'\n  },\n  {\n    id: '48',\n    country: 'Congo',\n    capital: 'Brazzaville'\n  },\n  {\n    id: '49',\n    country: 'Cook Islands',\n    capital: 'Avarua'\n  },\n  {\n    id: '50',\n    country: 'Costa Rica',\n    capital: 'San José'\n  },\n  {\n    id: '51',\n    country: 'Croatia',\n    capital: 'Zagreb'\n  },\n  {\n    id: '52',\n    country: 'Cuba',\n    capital: 'La Habana'\n  },\n  {\n    id: '53',\n    country: 'Cyprus',\n    capital: 'Nicosia'\n  },\n  {\n    id: '54',\n    country: 'Czech Republic',\n    capital: 'Praha'\n  },\n  {\n    id: '55',\n    country: 'Denmark',\n    capital: 'Copenhagen'\n  },\n  {\n    id: '56',\n    country: 'Djibouti',\n    capital: 'Djibouti'\n  },\n  {\n    id: '57',\n    country: 'Dominica',\n    capital: 'Roseau'\n  },\n  {\n    id: '58',\n    country: 'Dominican Republic',\n    capital: 'Santo Domingo de Guzm'\n  },\n  {\n    id: '59',\n    country: 'East Timor',\n    capital: 'Dili'\n  },\n  {\n    id: '60',\n    country: 'Ecuador',\n    capital: 'Quito'\n  },\n  {\n    id: '61',\n    country: 'Egypt',\n    capital: 'Cairo'\n  },\n  {\n    id: '62',\n    country: 'El Salvador',\n    capital: 'San Salvador'\n  },\n  {\n    id: '63',\n    country: 'England',\n    capital: 'London'\n  },\n  {\n    id: '64',\n    country: 'Equatorial Guinea',\n    capital: 'Malabo'\n  },\n  {\n    id: '65',\n    country: 'Eritrea',\n    capital: 'Asmara'\n  },\n  {\n    id: '66',\n    country: 'Estonia',\n    capital: 'Tallinn'\n  },\n  {\n    id: '67',\n    country: 'Ethiopia',\n    capital: 'Addis Abeba'\n  },\n  {\n    id: '68',\n    country: 'Falkland Islands',\n    capital: 'Stanley'\n  },\n  {\n    id: '69',\n    country: 'Faroe Islands',\n    capital: 'Tórshavn'\n  },\n  {\n    id: '70',\n    country: 'Fiji Islands',\n    capital: 'Suva'\n  },\n  {\n    id: '71',\n    country: 'Finland',\n    capital: 'Helsinki [Helsingfors]'\n  },\n  {\n    id: '72',\n    country: 'France',\n    capital: 'Paris'\n  },\n  {\n    id: '73',\n    country: 'French Guiana',\n    capital: 'Cayenne'\n  },\n  {\n    id: '74',\n    country: 'French Polynesia',\n    capital: 'Papeete'\n  },\n  {\n    id: '75',\n    country: 'French Southern territories'\n  },\n  {\n    id: '76',\n    country: 'Gabon',\n    capital: 'Libreville'\n  },\n  {\n    id: '77',\n    country: 'Gambia',\n    capital: 'Banjul'\n  },\n  {\n    id: '78',\n    country: 'Georgia',\n    capital: 'Tbilisi'\n  },\n  {\n    id: '79',\n    country: 'Germany',\n    capital: 'Berlin'\n  },\n  {\n    id: '80',\n    country: 'Ghana',\n    capital: 'Accra'\n  },\n  {\n    id: '81',\n    country: 'Gibraltar',\n    capital: 'Gibraltar'\n  },\n  {\n    id: '82',\n    country: 'Greece',\n    capital: 'Athenai'\n  },\n  {\n    id: '83',\n    country: 'Greenland',\n    capital: 'Nuuk'\n  },\n  {\n    id: '84',\n    country: 'Grenada',\n    capital: \"Saint George's\"\n  },\n  {\n    id: '85',\n    country: 'Guadeloupe',\n    capital: 'Basse-Terre'\n  },\n  {\n    id: '86',\n    country: 'Guam',\n    capital: 'Aga'\n  },\n  {\n    id: '87',\n    country: 'Guatemala',\n    capital: 'Ciudad de Guatemala'\n  },\n  {\n    id: '88',\n    country: 'Guinea',\n    capital: 'Conakry'\n  },\n  {\n    id: '89',\n    country: 'Guinea-Bissau',\n    capital: 'Bissau'\n  },\n  {\n    id: '90',\n    country: 'Guyana',\n    capital: 'Georgetown'\n  },\n  {\n    id: '91',\n    country: 'Haiti',\n    capital: 'Port-au-Prince'\n  },\n  {\n    id: '92',\n    country: 'Heard Island and McDonald Islands'\n  },\n  {\n    id: '93',\n    country: 'Holy See (Vatican City State)',\n    capital: 'Citt'\n  },\n  {\n    id: '94',\n    country: 'Honduras',\n    capital: 'Tegucigalpa'\n  },\n  {\n    id: '95',\n    country: 'Hong Kong',\n    capital: 'Victoria'\n  },\n  {\n    id: '96',\n    country: 'Hungary',\n    capital: 'Budapest'\n  },\n  {\n    id: '97',\n    country: 'Iceland',\n    capital: 'Reykjavík'\n  },\n  {\n    id: '98',\n    country: 'India',\n    capital: 'New Delhi'\n  },\n  {\n    id: '99',\n    country: 'Indonesia',\n    capital: 'Jakarta'\n  },\n  {\n    id: '100',\n    country: 'Iran',\n    capital: 'Tehran'\n  },\n  {\n    id: '101',\n    country: 'Iraq',\n    capital: 'Baghdad'\n  },\n  {\n    id: '102',\n    country: 'Ireland',\n    capital: 'Dublin'\n  },\n  {\n    id: '103',\n    country: 'Israel',\n    capital: 'Jerusalem'\n  },\n  {\n    id: '104',\n    country: 'Italy',\n    capital: 'Roma'\n  },\n  {\n    id: '105',\n    country: 'Ivory Coast',\n    capital: 'Yamoussoukro'\n  },\n  {\n    id: '106',\n    country: 'Jamaica',\n    capital: 'Kingston'\n  },\n  {\n    id: '107',\n    country: 'Japan',\n    capital: 'Tokyo'\n  },\n  {\n    id: '108',\n    country: 'Jordan',\n    capital: 'Amman'\n  },\n  {\n    id: '109',\n    country: 'Kazakhstan',\n    capital: 'Astana'\n  },\n  {\n    id: '110',\n    country: 'Kenya',\n    capital: 'Nairobi'\n  },\n  {\n    id: '111',\n    country: 'Kiribati',\n    capital: 'Bairiki'\n  },\n  {\n    id: '112',\n    country: 'Kuwait',\n    capital: 'Kuwait'\n  },\n  {\n    id: '113',\n    country: 'Kyrgyzstan',\n    capital: 'Bishkek'\n  },\n  {\n    id: '114',\n    country: 'Laos',\n    capital: 'Vientiane'\n  },\n  {\n    id: '115',\n    country: 'Latvia',\n    capital: 'Riga'\n  },\n  {\n    id: '116',\n    country: 'Lebanon',\n    capital: 'Beirut'\n  },\n  {\n    id: '117',\n    country: 'Lesotho',\n    capital: 'Maseru'\n  },\n  {\n    id: '118',\n    country: 'Liberia',\n    capital: 'Monrovia'\n  },\n  {\n    id: '119',\n    country: 'Libyan Arab Jamahiriya',\n    capital: 'Tripoli'\n  },\n  {\n    id: '120',\n    country: 'Liechtenstein',\n    capital: 'Vaduz'\n  },\n  {\n    id: '121',\n    country: 'Lithuania',\n    capital: 'Vilnius'\n  },\n  {\n    id: '122',\n    country: 'Luxembourg',\n    capital: 'Luxembourg [Luxemburg/L'\n  },\n  {\n    id: '123',\n    country: 'Macao',\n    capital: 'Macao'\n  },\n  {\n    id: '124',\n    country: 'North Macedonia',\n    capital: 'Skopje'\n  },\n  {\n    id: '125',\n    country: 'Madagascar',\n    capital: 'Antananarivo'\n  },\n  {\n    id: '126',\n    country: 'Malawi',\n    capital: 'Lilongwe'\n  },\n  {\n    id: '127',\n    country: 'Malaysia',\n    capital: 'Kuala Lumpur'\n  },\n  {\n    id: '128',\n    country: 'Maldives',\n    capital: 'Male'\n  },\n  {\n    id: '129',\n    country: 'Mali',\n    capital: 'Bamako'\n  },\n  {\n    id: '130',\n    country: 'Malta',\n    capital: 'Valletta'\n  },\n  {\n    id: '131',\n    country: 'Marshall Islands',\n    capital: 'Dalap-Uliga-Darrit'\n  },\n  {\n    id: '132',\n    country: 'Martinique',\n    capital: 'Fort-de-France'\n  },\n  {\n    id: '133',\n    country: 'Mauritania',\n    capital: 'Nouakchott'\n  },\n  {\n    id: '134',\n    country: 'Mauritius',\n    capital: 'Port-Louis'\n  },\n  {\n    id: '135',\n    country: 'Mayotte',\n    capital: 'Mamoutzou'\n  },\n  {\n    id: '136',\n    country: 'Mexico',\n    capital: 'Ciudad de M'\n  },\n  {\n    id: '137',\n    country: 'Micronesia, Federated States of',\n    capital: 'Palikir'\n  },\n  {\n    id: '138',\n    country: 'Moldova',\n    capital: 'Chisinau'\n  },\n  {\n    id: '139',\n    country: 'Monaco',\n    capital: 'Monaco-Ville'\n  },\n  {\n    id: '140',\n    country: 'Mongolia',\n    capital: 'Ulan Bator'\n  },\n  {\n    id: '141',\n    country: 'Montenegro',\n    capital: 'Podgorica'\n  },\n  {\n    id: '142',\n    country: 'Montserrat',\n    capital: 'Plymouth'\n  },\n  {\n    id: '143',\n    country: 'Morocco',\n    capital: 'Rabat'\n  },\n  {\n    id: '144',\n    country: 'Mozambique',\n    capital: 'Maputo'\n  },\n  {\n    id: '145',\n    country: 'Myanmar',\n    capital: 'Rangoon (Yangon)'\n  },\n  {\n    id: '146',\n    country: 'Namibia',\n    capital: 'Windhoek'\n  },\n  {\n    id: '147',\n    country: 'Nauru',\n    capital: 'Yaren'\n  },\n  {\n    id: '148',\n    country: 'Nepal',\n    capital: 'Kathmandu'\n  },\n  {\n    id: '149',\n    country: 'Netherlands',\n    capital: 'Amsterdam'\n  },\n  {\n    id: '150',\n    country: 'Netherlands Antilles',\n    capital: 'Willemstad'\n  },\n  {\n    id: '151',\n    country: 'New Caledonia',\n    capital: 'Noum'\n  },\n  {\n    id: '152',\n    country: 'New Zealand',\n    capital: 'Wellington'\n  },\n  {\n    id: '153',\n    country: 'Nicaragua',\n    capital: 'Managua'\n  },\n  {\n    id: '154',\n    country: 'Niger',\n    capital: 'Niamey'\n  },\n  {\n    id: '155',\n    country: 'Nigeria',\n    capital: 'Abuja'\n  },\n  {\n    id: '156',\n    country: 'Niue',\n    capital: 'Alofi'\n  },\n  {\n    id: '157',\n    country: 'Norfolk Island',\n    capital: 'Kingston'\n  },\n  {\n    id: '158',\n    country: 'North Korea',\n    capital: 'Pyongyang'\n  },\n  {\n    id: '159',\n    country: 'Northern Ireland',\n    capital: 'Belfast'\n  },\n  {\n    id: '160',\n    country: 'Northern Mariana Islands',\n    capital: 'Garapan'\n  },\n  {\n    id: '161',\n    country: 'Norway',\n    capital: 'Oslo'\n  },\n  {\n    id: '162',\n    country: 'Oman',\n    capital: 'Masqat'\n  },\n  {\n    id: '163',\n    country: 'Pakistan',\n    capital: 'Islamabad'\n  },\n  {\n    id: '164',\n    country: 'Palau',\n    capital: 'Koror'\n  },\n  {\n    id: '165',\n    country: 'Palestine',\n    capital: 'Gaza'\n  },\n  {\n    id: '166',\n    country: 'Panama',\n    capital: 'Ciudad de Panamá'\n  },\n  {\n    id: '167',\n    country: 'Papua New Guinea',\n    capital: 'Port Moresby'\n  },\n  {\n    id: '168',\n    country: 'Paraguay',\n    capital: 'Asunción'\n  },\n  {\n    id: '169',\n    country: 'Peru',\n    capital: 'Lima'\n  },\n  {\n    id: '170',\n    country: 'Philippines',\n    capital: 'Manila'\n  },\n  {\n    id: '171',\n    country: 'Pitcairn',\n    capital: 'Adamstown'\n  },\n  {\n    id: '172',\n    country: 'Poland',\n    capital: 'Warszawa'\n  },\n  {\n    id: '173',\n    country: 'Portugal',\n    capital: 'Lisboa'\n  },\n  {\n    id: '174',\n    country: 'Puerto Rico',\n    capital: 'San Juan'\n  },\n  {\n    id: '175',\n    country: 'Qatar',\n    capital: 'Doha'\n  },\n  {\n    id: '176',\n    country: 'Reunion',\n    capital: 'Saint-Denis'\n  },\n  {\n    id: '177',\n    country: 'Romania',\n    capital: 'Bucuresti'\n  },\n  {\n    id: '178',\n    country: 'Russian Federation',\n    capital: 'Moscow'\n  },\n  {\n    id: '179',\n    country: 'Rwanda',\n    capital: 'Kigali'\n  },\n  {\n    id: '180',\n    country: 'Saint Helena',\n    capital: 'Jamestown'\n  },\n  {\n    id: '181',\n    country: 'Saint Kitts and Nevis',\n    capital: 'Basseterre'\n  },\n  {\n    id: '182',\n    country: 'Saint Lucia',\n    capital: 'Castries'\n  },\n  {\n    id: '183',\n    country: 'Saint Pierre and Miquelon',\n    capital: 'Saint-Pierre'\n  },\n  {\n    id: '184',\n    country: 'Saint Vincent and the Grenadines',\n    capital: 'Kingstown'\n  },\n  {\n    id: '185',\n    country: 'Samoa',\n    capital: 'Apia'\n  },\n  {\n    id: '186',\n    country: 'San Marino',\n    capital: 'San Marino'\n  },\n  {\n    id: '187',\n    country: 'Sao Tome and Principe',\n    capital: 'São Tomé'\n  },\n  {\n    id: '188',\n    country: 'Saudi Arabia',\n    capital: 'Riyadh'\n  },\n  {\n    id: '189',\n    country: 'Scotland',\n    capital: 'Edinburgh'\n  },\n  {\n    id: '190',\n    country: 'Senegal',\n    capital: 'Dakar'\n  },\n  {\n    id: '191',\n    country: 'Serbia',\n    capital: 'Belgrade'\n  },\n  {\n    id: '192',\n    country: 'Seychelles',\n    capital: 'Victoria'\n  },\n  {\n    id: '193',\n    country: 'Sierra Leone',\n    capital: 'Freetown'\n  },\n  {\n    id: '194',\n    country: 'Singapore',\n    capital: 'Singapore'\n  },\n  {\n    id: '195',\n    country: 'Slovakia',\n    capital: 'Bratislava'\n  },\n  {\n    id: '196',\n    country: 'Slovenia',\n    capital: 'Ljubljana'\n  },\n  {\n    id: '197',\n    country: 'Solomon Islands',\n    capital: 'Honiara'\n  },\n  {\n    id: '198',\n    country: 'Somalia',\n    capital: 'Mogadishu'\n  },\n  {\n    id: '199',\n    country: 'South Africa',\n    capital: 'Pretoria'\n  },\n  {\n    id: '200',\n    country: 'South Georgia and the South Sandwich Islands'\n  },\n  {\n    id: '201',\n    country: 'South Korea',\n    capital: 'Seoul'\n  },\n  {\n    id: '202',\n    country: 'South Sudan',\n    capital: 'Juba'\n  },\n  {\n    id: '203',\n    country: 'Spain',\n    capital: 'Madrid'\n  },\n  {\n    id: '204',\n    country: 'Sri Lanka',\n    capital: 'Colombo, Sri Jayawardenepura Kotte'\n  },\n  {\n    id: '205',\n    country: 'Sudan',\n    capital: 'Khartum'\n  },\n  {\n    id: '206',\n    country: 'Suriname',\n    capital: 'Paramaribo'\n  },\n  {\n    id: '207',\n    country: 'Svalbard and Jan Mayen',\n    capital: 'Longyearbyen'\n  },\n  {\n    id: '208',\n    country: 'Swaziland',\n    capital: 'Mbabane'\n  },\n  {\n    id: '209',\n    country: 'Sweden',\n    capital: 'Stockholm'\n  },\n  {\n    id: '210',\n    country: 'Switzerland',\n    capital: 'Bern'\n  },\n  {\n    id: '211',\n    country: 'Syria',\n    capital: 'Damascus'\n  },\n  {\n    id: '212',\n    country: 'Tajikistan',\n    capital: 'Dushanbe'\n  },\n  {\n    id: '213',\n    country: 'Tanzania',\n    capital: 'Dodoma'\n  },\n  {\n    id: '214',\n    country: 'Thailand',\n    capital: 'Bangkok'\n  },\n  {\n    id: '215',\n    country: 'The Democratic Republic of Congo',\n    capital: 'Kinshasa'\n  },\n  {\n    id: '216',\n    country: 'Togo',\n    capital: 'Lomé'\n  },\n  {\n    id: '217',\n    country: 'Tokelau',\n    capital: 'Fakaofo'\n  },\n  {\n    id: '218',\n    country: 'Tonga',\n    capital: \"Nuku'alofa\"\n  },\n  {\n    id: '219',\n    country: 'Trinidad and Tobago',\n    capital: 'Port-of-Spain'\n  },\n  {\n    id: '220',\n    country: 'Tunisia',\n    capital: 'Tunis'\n  },\n  {\n    id: '221',\n    country: 'Turkey',\n    capital: 'Ankara'\n  },\n  {\n    id: '222',\n    country: 'Turkmenistan',\n    capital: 'Ashgabat'\n  },\n  {\n    id: '223',\n    country: 'Turks and Caicos Islands',\n    capital: 'Cockburn Town'\n  },\n  {\n    id: '224',\n    country: 'Tuvalu',\n    capital: 'Funafuti'\n  },\n  {\n    id: '225',\n    country: 'Uganda',\n    capital: 'Kampala'\n  },\n  {\n    id: '226',\n    country: 'Ukraine',\n    capital: 'Kyiv'\n  },\n  {\n    id: '227',\n    country: 'United Arab Emirates',\n    capital: 'Abu Dhabi'\n  },\n  {\n    id: '228',\n    country: 'United Kingdom',\n    capital: 'London'\n  },\n  {\n    id: '229',\n    country: 'United States',\n    capital: 'Washington'\n  },\n  {\n    id: '230',\n    country: 'United States Minor Outlying Islands'\n  },\n  {\n    id: '231',\n    country: 'Uruguay',\n    capital: 'Montevideo'\n  },\n  {\n    id: '232',\n    country: 'Uzbekistan',\n    capital: 'Toskent'\n  },\n  {\n    id: '233',\n    country: 'Vanuatu',\n    capital: 'Port-Vila'\n  },\n  {\n    id: '234',\n    country: 'Venezuela',\n    capital: 'Caracas'\n  },\n  {\n    id: '235',\n    country: 'Vietnam',\n    capital: 'Hanoi'\n  },\n  {\n    id: '236',\n    country: 'Virgin Islands, British',\n    capital: 'Road Town'\n  },\n  {\n    id: '237',\n    country: 'Virgin Islands, U.S.',\n    capital: 'Charlotte Amalie'\n  },\n  {\n    id: '238',\n    country: 'Wales',\n    capital: 'Cardiff'\n  },\n  {\n    id: '239',\n    country: 'Wallis and Futuna',\n    capital: 'Mata-Utu'\n  },\n  {\n    id: '240',\n    country: 'Western Sahara',\n    capital: 'El-Aai'\n  },\n  {\n    id: '241',\n    country: 'Yemen',\n    capital: 'Sanaa'\n  },\n  {\n    id: '242',\n    country: 'Zambia',\n    capital: 'Lusaka'\n  },\n  {\n    id: '243',\n    country: 'Zimbabwe',\n    capital: 'Harare'\n  }\n];\n"]}

package/dist/collection/index.cdn.js

@@ -1,21 +1,48 @@
 (function (doc) {
-  var scriptElm = doc.scripts[doc.scripts.length - 1];
-  var warn = ['Discouraged script use, please remove: ' + scriptElm.outerHTML];
+  var scriptMap = doc.createElement('script');
+  scriptMap.setAttribute('type', 'importmap');
+  scriptMap.text = `
+    {
+      "imports": {
+        "@haiilo/catalyst": "https://cdn.jsdelivr.net/npm/@haiilo/catalyst/dist/catalyst/index.esm.js",
+        "@haiilo/catalyst-icons": "https://cdn.jsdelivr.net/npm/@haiilo/catalyst-icons/dist/js/icons.object.js"
+      }
+    }
+  `;
 
-  warn.push('To improve performance it is recommended to set the script in the head as follows:');
+  var scriptComp = doc.createElement('script');
+  scriptComp.setAttribute('type', 'module');
+  scriptComp.setAttribute('data-stencil-namespace', 'catalyst');
+  scriptComp.src = 'https://cdn.jsdelivr.net/npm/@haiilo/catalyst/dist/catalyst/catalyst.esm.js';
 
-  var parts = scriptElm.src.split('/');
-  parts.pop();
-  // add subfolder(s) here
-  // parts.push('...');
-  var url = parts.join('/');
+  var scriptInit = doc.createElement('script');
+  scriptInit.setAttribute('type', 'module');
+  scriptInit.text = `
+    import { ci } from '@haiilo/catalyst-icons';
+    import { CatI18nRegistry, CatIconRegistry } from '@haiilo/catalyst';
 
-  scriptElm = doc.createElement('script');
-  scriptElm.setAttribute('type', 'module');
-  scriptElm.src = url + '/catalyst.esm.js';
-  warn.push(scriptElm.outerHTML);
-  scriptElm.setAttribute('data-stencil-namespace', 'catalyst');
-  doc.head.appendChild(scriptElm);
+    CatIconRegistry.getInstance().addIcons(ci);
+    CatI18nRegistry.getInstance().register('en', {
+        'input.clear': 'Clear',
+        'input.optional': 'Optional',
+        'select.addItem': 'Add item',
+        'select.customAddItem': 'Custom add item',
+        'select.loading': 'Loading',
+        'select.noResults': 'No results',
+        'select.noChoices': 'No choices',
+        'select.removeItem': 'Remove item',
+        'select.searchPlaceholder': 'Search',
+        'select.selectItem': 'Select item',
+        'select.uniqueItem': 'Unique item',
+        'select.open': 'Open',
+        'select.close': 'Close',
+        'select.clear': 'Clear',
+        'select.deselect': 'Deselect',
+        'select.empty': 'No items'
+      });
+  `;
 
-  console.warn(warn.join('\n'));
+  doc.head.appendChild(scriptMap);
+  doc.head.appendChild(scriptComp);
+  doc.head.appendChild(scriptInit);
 })(document);

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,gDAAgD,CAAC","sourcesContent":["export { Components, JSX } from './components';\nexport { CatI18nRegistry } from './components/cat-i18n/cat-i18n-registry';\nexport { CatIconRegistry } from './components/cat-icon/cat-icon-registry';\nexport { NotificationsService } from './components/cat-notification/cat-notification';\nexport { CatSelectItem } from './components/cat-select/cat-select';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,gDAAgD,CAAC","sourcesContent":["export { Components, JSX } from './components';\nexport { CatI18nRegistry } from './components/cat-i18n/cat-i18n-registry';\nexport { CatIconRegistry } from './components/cat-icon/cat-icon-registry';\nexport { NotificationsService } from './components/cat-notification/cat-notification';\nexport { CatSelectItem } from './components/cat-select/cat-select';\nexport { CatSelectRemoteConnector } from './components/cat-select-remote/cat-select-remote';\nexport { RenderInfo } from './components/cat-select-remote/cat-select-remote';\nexport { Page } from './components/cat-select-remote/cat-select-remote';\n"]}

package/dist/components/cat-badge.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const catBadgeCss = ":host{display:inline-flex;max-width:100%;vertical-align:baseline}:host([hidden]){display:none}.badge{font:inherit;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:0.125rem;text-decoration:none;width:100%;box-sizing:border-box;line-height:1;white-space:nowrap}.badge slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.badge-round{border-radius:10rem}.badge-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.badge-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}.badge-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--border:var(--cat-primary-text, 32, 127, 138)}.badge-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}.badge-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}.badge-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}.badge-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border:217, 52, 13}.badge-xs{height:1rem;min-width:0.75rem;font-size:12px;padding:0 0.25rem}.badge-s{height:1.5rem;min-width:1rem;font-size:12px;padding:0 0.5rem}.badge-m{height:2rem;min-width:1.25rem;font-size:13px;padding:0 0.75rem}.badge-l{height:2.5rem;min-width:1.5rem;font-size:15px;padding:0 1rem}.badge-xl{height:3rem;min-width:1.75rem;font-size:18px;padding:0 1rem}.badge-pulse.badge-filled{animation:1.5s ease 0s infinite normal none running pulse}.badge-pulse.badge-outlined{animation:1.5s ease 0s infinite normal none running pulse-outlined}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--bg))}70%{box-shadow:transparent 0 0 0 0.5rem}100%{box-shadow:transparent 0 0 0 0}}@keyframes pulse-outlined{0%{box-shadow:0 0 0 0 rgb(var(--bg)), inset 0 0 0 1px rgba(var(--border), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--border), 0.2)}}";
+const catBadgeCss = ":host{display:inline-flex;max-width:100%;vertical-align:baseline}:host([hidden]){display:none}.badge{font:inherit;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:0.125rem;text-decoration:none;width:100%;box-sizing:border-box;line-height:1;white-space:nowrap}.badge slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.badge-round{border-radius:10rem}.badge-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.badge-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}.badge-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--border:var(--cat-primary-text, 32, 127, 138)}.badge-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}.badge-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}.badge-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}.badge-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border:217, 52, 13}.badge-xs{height:1rem;min-width:1rem;font-size:12px;padding:0 0.25rem}.badge-s{height:1.5rem;min-width:1.5rem;font-size:12px;padding:0 0.5rem}.badge-m{height:2rem;min-width:2rem;font-size:13px;padding:0 0.75rem}.badge-l{height:2.5rem;min-width:2.5rem;font-size:15px;padding:0 1rem}.badge-xl{height:3rem;min-width:3rem;font-size:18px;padding:0 1rem}.badge-pulse.badge-filled{animation:1.5s ease 0s infinite normal none running pulse}.badge-pulse.badge-outlined{animation:1.5s ease 0s infinite normal none running pulse-outlined}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--bg))}70%{box-shadow:transparent 0 0 0 0.5rem}100%{box-shadow:transparent 0 0 0 0}}@keyframes pulse-outlined{0%{box-shadow:0 0 0 0 rgb(var(--bg)), inset 0 0 0 1px rgba(var(--border), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--border), 0.2)}}";
 
 const CatBadge$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/cat-badge.js.map

@@ -1 +1 @@
-{"file":"cat-badge.js","mappings":";;AAAA,MAAM,WAAW,GAAG,woEAAwoE;;MCa/oEA,UAAQ;EALrB;;;;;;;IASU,YAAO,GAA0B,QAAQ,CAAC;;;;IAK1C,UAAK,GAA+D,SAAS,CAAC;;;;IAK9E,SAAI,GAAkC,GAAG,CAAC;;;;IAK1C,UAAK,GAAG,KAAK,CAAC;;;;IAKd,UAAK,GAAG,KAAK,CAAC;GAmBvB;EAjBC,MAAM;IACJ,QACE,YACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,aAAa,EAAE,IAAI,CAAC,KAAK;QACzB,aAAa,EAAE,IAAI,CAAC,KAAK;QACzB,CAAC,SAAS,IAAI,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QAChD,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5C,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAC3C,IAED,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatBadge"],"sources":["./src/components/cat-badge/cat-badge.scss?tag=cat-badge&encapsulation=shadow","./src/components/cat-badge/cat-badge.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$badge-sizes: (\n  'xl': 1.75rem,\n  'l': 1.5rem,\n  'm': 1.25rem,\n  's': 1rem,\n  'xs': 0.75rem\n);\n\n:host {\n  display: inline-flex;\n  max-width: 100%;\n  vertical-align: baseline;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.badge {\n  font: inherit;\n  flex: 1 1 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: cat-border-radius('s');\n  text-decoration: none;\n  width: 100%;\n  box-sizing: border-box;\n  line-height: 1;\n  white-space: nowrap;\n\n  slot {\n    display: inline-block;\n    @include cat-ellipsis;\n  }\n}\n\n// ----- round\n\n.badge-round {\n  border-radius: 10rem;\n}\n\n// ----- theme\n\n.badge-filled {\n  background-color: cat-token-wrap(var(--bg));\n  color: cat-token-wrap(var(--fill));\n  font-weight: 600;\n  @include cat-font-smooth;\n}\n\n$-outline: inset 0 0 0 1px cat-token-wrap(var(--border), $alpha: 0.2);\n\n.badge-outlined {\n  background-color: cat-token('color.ui.background.body');\n  box-shadow: $-outline;\n  color: cat-token-wrap(var(--text));\n}\n\n@mixin theme($theme) {\n  .badge-#{$theme} {\n    --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n    --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    @if $theme == 'secondary' {\n      --border: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    } @else {\n      --border: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .badge-#{$size} {\n    height: cat-token('size.badge.height.#{$size}');\n    min-width: map.get($badge-sizes, $size);\n    font-size: cat-token('size.badge.font.#{$size}');\n    padding: 0 cat-token('size.badge.padding.horizontal.#{$size}');\n  }\n}\n\n@include size('xs', 'xs');\n@include size('s', 's');\n@include size('m', 'm');\n@include size('l', 'l');\n@include size('xl', 'xl');\n\n// ----- pulse\n\n$-pulse-0: 0 0 0 0 cat-token-wrap(var(--bg));\n$-pulse-70: transparent 0 0 0 0.5rem;\n$-pulse-100: transparent 0 0 0 0;\n\n.badge-pulse {\n  &.badge-filled {\n    animation: 1.5s ease 0s infinite normal none running pulse;\n  }\n\n  &.badge-outlined {\n    animation: 1.5s ease 0s infinite normal none running pulse-outlined;\n  }\n}\n\n@keyframes pulse {\n  0% {\n    box-shadow: $-pulse-0;\n  }\n\n  70% {\n    box-shadow: $-pulse-70;\n  }\n\n  100% {\n    box-shadow: $-pulse-100;\n  }\n}\n\n@keyframes pulse-outlined {\n  0% {\n    box-shadow: $-pulse-0, $-outline;\n  }\n\n  70% {\n    box-shadow: $-pulse-70, $-outline;\n  }\n\n  100% {\n    box-shadow: $-pulse-100, $-outline;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Badges are used to inform users of the status of an object or of an action\n * that’s been taken.\n *\n * @part badge - The badge element.\n */\n@Component({\n  tag: 'cat-badge',\n  styleUrl: 'cat-badge.scss',\n  shadow: true\n})\nexport class CatBadge {\n  /**\n   * The rendering style of the badge.\n   */\n  @Prop() variant: 'filled' | 'outlined' = 'filled';\n\n  /**\n   * The color palette of the badge.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The size of the badge.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round badge edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Draw attention to the badge with a subtle animation.\n   */\n  @Prop() pulse = false;\n\n  render() {\n    return (\n      <span\n        part=\"badge\"\n        class={{\n          badge: true,\n          'badge-round': this.round,\n          'badge-pulse': this.pulse,\n          [`badge-${this.variant}`]: Boolean(this.variant),\n          [`badge-${this.color}`]: Boolean(this.color),\n          [`badge-${this.size}`]: Boolean(this.size)\n        }}\n      >\n        <slot></slot>\n      </span>\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-badge.js","mappings":";;AAAA,MAAM,WAAW,GAAG,ioEAAioE;;MCaxoEA,UAAQ;EALrB;;;;;;;IASU,YAAO,GAA0B,QAAQ,CAAC;;;;IAK1C,UAAK,GAA+D,SAAS,CAAC;;;;IAK9E,SAAI,GAAkC,GAAG,CAAC;;;;IAK1C,UAAK,GAAG,KAAK,CAAC;;;;IAKd,UAAK,GAAG,KAAK,CAAC;GAmBvB;EAjBC,MAAM;IACJ,QACE,YACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,aAAa,EAAE,IAAI,CAAC,KAAK;QACzB,aAAa,EAAE,IAAI,CAAC,KAAK;QACzB,CAAC,SAAS,IAAI,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QAChD,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5C,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAC3C,IAED,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatBadge"],"sources":["./src/components/cat-badge/cat-badge.scss?tag=cat-badge&encapsulation=shadow","./src/components/cat-badge/cat-badge.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n:host {\n  display: inline-flex;\n  max-width: 100%;\n  vertical-align: baseline;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.badge {\n  font: inherit;\n  flex: 1 1 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: cat-border-radius('s');\n  text-decoration: none;\n  width: 100%;\n  box-sizing: border-box;\n  line-height: 1;\n  white-space: nowrap;\n\n  slot {\n    display: inline-block;\n    @include cat-ellipsis;\n  }\n}\n\n// ----- round\n\n.badge-round {\n  border-radius: 10rem;\n}\n\n// ----- theme\n\n.badge-filled {\n  background-color: cat-token-wrap(var(--bg));\n  color: cat-token-wrap(var(--fill));\n  font-weight: 600;\n  @include cat-font-smooth;\n}\n\n$-outline: inset 0 0 0 1px cat-token-wrap(var(--border), $alpha: 0.2);\n\n.badge-outlined {\n  background-color: cat-token('color.ui.background.body');\n  box-shadow: $-outline;\n  color: cat-token-wrap(var(--text));\n}\n\n@mixin theme($theme) {\n  .badge-#{$theme} {\n    --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n    --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    @if $theme == 'secondary' {\n      --border: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    } @else {\n      --border: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .badge-#{$size} {\n    height: cat-token('size.badge.height.#{$size}');\n    min-width: cat-token('size.badge.height.#{$size}');\n    font-size: cat-token('size.badge.font.#{$size}');\n    padding: 0 cat-token('size.badge.padding.horizontal.#{$size}');\n  }\n}\n\n@include size('xs', 'xs');\n@include size('s', 's');\n@include size('m', 'm');\n@include size('l', 'l');\n@include size('xl', 'xl');\n\n// ----- pulse\n\n$-pulse-0: 0 0 0 0 cat-token-wrap(var(--bg));\n$-pulse-70: transparent 0 0 0 0.5rem;\n$-pulse-100: transparent 0 0 0 0;\n\n.badge-pulse {\n  &.badge-filled {\n    animation: 1.5s ease 0s infinite normal none running pulse;\n  }\n\n  &.badge-outlined {\n    animation: 1.5s ease 0s infinite normal none running pulse-outlined;\n  }\n}\n\n@keyframes pulse {\n  0% {\n    box-shadow: $-pulse-0;\n  }\n\n  70% {\n    box-shadow: $-pulse-70;\n  }\n\n  100% {\n    box-shadow: $-pulse-100;\n  }\n}\n\n@keyframes pulse-outlined {\n  0% {\n    box-shadow: $-pulse-0, $-outline;\n  }\n\n  70% {\n    box-shadow: $-pulse-70, $-outline;\n  }\n\n  100% {\n    box-shadow: $-pulse-100, $-outline;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Badges are used to inform users of the status of an object or of an action\n * that’s been taken.\n *\n * @part badge - The badge element.\n */\n@Component({\n  tag: 'cat-badge',\n  styleUrl: 'cat-badge.scss',\n  shadow: true\n})\nexport class CatBadge {\n  /**\n   * The rendering style of the badge.\n   */\n  @Prop() variant: 'filled' | 'outlined' = 'filled';\n\n  /**\n   * The color palette of the badge.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The size of the badge.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round badge edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Draw attention to the badge with a subtle animation.\n   */\n  @Prop() pulse = false;\n\n  render() {\n    return (\n      <span\n        part=\"badge\"\n        class={{\n          badge: true,\n          'badge-round': this.round,\n          'badge-pulse': this.pulse,\n          [`badge-${this.variant}`]: Boolean(this.variant),\n          [`badge-${this.color}`]: Boolean(this.color),\n          [`badge-${this.size}`]: Boolean(this.size)\n        }}\n      >\n        <slot></slot>\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-button2.js

@@ -118,7 +118,7 @@ function createEmptyStyleRule(query) {
   }
 }
 
-const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:0.25rem;text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:0.65;filter:grayscale(100%)}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:none}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:none;background-color:rgba(var(--base), 0.05)}.cat-button-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--base:var(--cat-primary-text, 32, 127, 138)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 28, 112, 122);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 28, 112, 122)}.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 25, 101, 110);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 25, 101, 110)}.cat-button-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--base:105, 118, 135}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--base:0, 132, 88}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 117, 78;--fill:255, 255, 255;--text:0, 117, 78}.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 105, 70;--fill:255, 255, 255;--text:0, 105, 70}.cat-button-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--base:159, 97, 0}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 214, 148;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 222, 168;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--base:217, 52, 13}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:194, 46, 11;--fill:255, 255, 255;--text:194, 46, 11}.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:174, 42, 10;--fill:255, 255, 255;--text:174, 42, 10}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.25rem 0.25rem;font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-xs .cat-button-prefix{margin-right:0.25rem}.cat-button-xs .cat-button-suffix{margin-left:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xs{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=xs]){margin:-0.25rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.25rem;margin-bottom:-0.25rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.25rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.25rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-s .cat-button-prefix{margin-right:0.25rem}.cat-button-s .cat-button-suffix{margin-left:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-s{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-m .cat-button-prefix{margin-right:0.25rem}.cat-button-m .cat-button-suffix{margin-left:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-m{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-l .cat-button-prefix{margin-right:0.25rem}.cat-button-l .cat-button-suffix{margin-left:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-l{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-xl .cat-button-prefix{margin-right:0.25rem}.cat-button-xl .cat-button-suffix{margin-left:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xl{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}.cat-button-active::before{content:\"\";display:block;position:absolute;top:0;left:0;width:0.25rem;height:100%;background:rgb(var(--base))}:host-context(nav){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0;justify-content:left}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}";
+const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:0.25rem;text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:0.65;filter:grayscale(100%)}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:none}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:none;background-color:rgba(var(--base), 0.05)}.cat-button-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--base:var(--cat-primary-text, 32, 127, 138)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 28, 112, 122);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 28, 112, 122)}.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 25, 101, 110);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 25, 101, 110)}.cat-button-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--base:105, 118, 135}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--base:0, 132, 88}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 117, 78;--fill:255, 255, 255;--text:0, 117, 78}.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 105, 70;--fill:255, 255, 255;--text:0, 105, 70}.cat-button-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--base:159, 97, 0}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 214, 148;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 222, 168;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--base:217, 52, 13}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:194, 46, 11;--fill:255, 255, 255;--text:194, 46, 11}.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:174, 42, 10;--fill:255, 255, 255;--text:174, 42, 10}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.25rem 0.25rem;font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-xs .cat-button-prefix{margin-right:0.25rem}.cat-button-xs .cat-button-suffix{margin-left:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xs{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=xs]){margin:-0.25rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.25rem;margin-bottom:-0.25rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.25rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.25rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-s .cat-button-prefix{margin-right:0.25rem}.cat-button-s .cat-button-suffix{margin-left:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-s{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-m .cat-button-prefix{margin-right:0.25rem}.cat-button-m .cat-button-suffix{margin-left:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-m{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-l .cat-button-prefix{margin-right:0.25rem}.cat-button-l .cat-button-suffix{margin-left:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-l{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-xl .cat-button-prefix{margin-right:0.25rem}.cat-button-xl .cat-button-suffix{margin-left:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xl{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}.cat-button-active::before{content:\"\";display:block;position:absolute;top:0;left:0;width:0.25rem;height:100%;background:rgb(var(--base))}:host-context(nav){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0;justify-content:left}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}";
 
 const CatButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/cat-button2.js.map

@@ -1 +1 @@
-{"file":"cat-button2.js","mappings":"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","names":["log"],"sources":["./src/utils/breakpoints.ts","./src/utils/platform.ts","./src/utils/media-matcher.ts","./src/components/cat-button/cat-button.scss?tag=cat-button&encapsulation=shadow","./src/components/cat-button/cat-button.tsx"],"sourcesContent":["const _breakpoints = ['xs', 's', 'm', 'l', 'xl'] as const;\n\nexport type Breakpoint = typeof _breakpoints[number];\n\nexport const Breakpoints: { [breakpoint in Breakpoint]: string } = {\n  xs: '(max-width: 539.98px)',\n  s: '(max-width: 767.98px)',\n  m: '(max-width: 991.98px)',\n  l: '(max-width: 1199.98px)',\n  xl: '(max-width: 1399.98px)'\n};\n\nexport function isBreakpoint(value: unknown): value is Breakpoint {\n  return typeof value === 'string' && _breakpoints.includes(value as Breakpoint);\n}\n","// https://github.com/angular/components/blob/master/src/cdk/platform/platform.ts\n\n// Whether the current platform supports the V8 Break Iterator. The V8 check\n// is necessary to detect all Blink based browsers.\nlet hasV8BreakIterator: boolean;\n\n// We need a try/catch around the reference to `Intl`, because accessing it in some cases can\n// cause IE to throw. These cases are tied to particular versions of Windows and can happen if\n// the consumer is providing a polyfilled `Map`. See:\n// https://github.com/Microsoft/ChakraCore/issues/3189\n// https://github.com/angular/components/issues/15687\ntry {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  hasV8BreakIterator = typeof Intl !== 'undefined' && (Intl as any).v8BreakIterator;\n} catch {\n  hasV8BreakIterator = false;\n}\n\nexport class Platform {\n  /** Whether the current browser is Microsoft Edge. */\n  EDGE: boolean = /(edge)/i.test(navigator.userAgent);\n\n  /** Whether the current rendering engine is Microsoft Trident. */\n  TRIDENT: boolean = /(msie|trident)/i.test(navigator.userAgent);\n\n  // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.\n  /** Whether the current rendering engine is Blink. */\n  BLINK: boolean =\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    !!((window as any).chrome || hasV8BreakIterator) && typeof CSS !== 'undefined' && !this.EDGE && !this.TRIDENT;\n\n  // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to\n  // ensure that Webkit runs standalone and is not used as another engine's base.\n  /** Whether the current rendering engine is WebKit. */\n  WEBKIT: boolean = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;\n\n  /** Whether the current platform is Apple iOS. */\n  IOS: boolean = /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);\n\n  // It's difficult to detect the plain Gecko engine, because most of the browsers identify\n  // them self as Gecko-like browsers and modify the userAgent's according to that.\n  // Since we only cover one explicit Firefox case, we can simply check for Firefox\n  // instead of having an unstable check for Gecko.\n  /** Whether the current browser is Firefox. */\n  FIREFOX: boolean = /(firefox|minefield)/i.test(navigator.userAgent);\n\n  /** Whether the current platform is Android. */\n  // Trident on mobile adds the android platform to the userAgent to trick detections.\n  ANDROID: boolean = /android/i.test(navigator.userAgent) && !this.TRIDENT;\n\n  // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake\n  // this and just place the Safari keyword in the userAgent. To be more safe about Safari every\n  // Safari browser should also use Webkit as its layout engine.\n  /** Whether the current browser is Safari. */\n  SAFARI: boolean = /safari/i.test(navigator.userAgent) && this.WEBKIT;\n}\n","import log from 'loglevel';\nimport { Platform } from './platform';\n\n// https://github.com/angular/components/blob/master/src/cdk/layout/media-matcher.ts\n\n/** Global registry for all dynamically-created, injected media queries. */\nconst mediaQueriesForWebkitCompatibility: Set<string> = new Set<string>();\n\n/** Style tag that holds all of the dynamically-created media queries. */\nlet mediaQueryStyleNode: HTMLStyleElement | undefined;\n\n/** A utility for calling matchMedia queries. */\nexport class MediaMatcher {\n  private _platform;\n  private _matchMedia: (query: string) => MediaQueryList;\n\n  constructor() {\n    this._platform = new Platform();\n    this._matchMedia = window.matchMedia.bind(window);\n  }\n\n  /**\n   * Evaluates the given media query and returns the native MediaQueryList from which results\n   * can be retrieved.\n   * Confirms the layout engine will trigger for the selector query provided and returns the\n   * MediaQueryList for the query provided.\n   */\n  matchMedia(query: string): MediaQueryList {\n    if (this._platform.WEBKIT || this._platform.BLINK) {\n      createEmptyStyleRule(query);\n    }\n    return this._matchMedia(query);\n  }\n}\n\n/**\n * Creates an empty stylesheet that is used to work around browser inconsistencies related to\n * `matchMedia`. At the time of writing, it handles the following cases:\n * 1. On WebKit browsers, a media query has to have at least one rule in order for `matchMedia`\n * to fire. We work around it by declaring a dummy stylesheet with a `@media` declaration.\n * 2. In some cases Blink browsers will stop firing the `matchMedia` listener if none of the rules\n * inside the `@media` match existing elements on the page. We work around it by having one rule\n * targeting the `body`. See https://github.com/angular/components/issues/23546.\n */\nfunction createEmptyStyleRule(query: string) {\n  if (mediaQueriesForWebkitCompatibility.has(query)) {\n    return;\n  }\n\n  try {\n    if (!mediaQueryStyleNode) {\n      mediaQueryStyleNode = document.createElement('style');\n      mediaQueryStyleNode.setAttribute('type', 'text/css');\n      document.head.appendChild(mediaQueryStyleNode);\n    }\n    if (mediaQueryStyleNode.sheet) {\n      mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);\n      mediaQueriesForWebkitCompatibility.add(query);\n    }\n  } catch (e) {\n    log.error(e);\n  }\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$button-sizes: (\n  'xl': 3.5rem,\n  'l': 3rem,\n  'm': 2.5rem,\n  's': 2rem,\n  'xs': 1.5rem\n);\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.cat-button {\n  position: relative;\n  font: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: cat-border-radius('m');\n  text-decoration: none;\n  width: 100%;\n  box-sizing: border-box;\n  cursor: pointer;\n  transition: color cat-token('time.transition.s') linear, border-color cat-token('time.transition.s') linear,\n    background-color cat-token('time.transition.s') linear, box-shadow cat-token('time.transition.s') linear;\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n// ----- content\n\n.cat-button-content {\n  // flex: 1 1 auto;\n  // text-align: center;\n\n  .cat-button-ellipsed & {\n    @include cat-ellipsis;\n  }\n}\n\n// ----- disabled\n\n.cat-button-disabled {\n  @include cat-disabled;\n}\n\n// ----- round\n\n.cat-button-round {\n  border-radius: 10rem;\n}\n\n// ----- loading\n\n.cat-button-loading {\n  cursor: default;\n\n  cat-spinner {\n    position: absolute;\n  }\n\n  > *:not(cat-spinner) {\n    visibility: hidden;\n  }\n}\n\n// ----- theme\n\n.cat-button-filled {\n  background-color: cat-token-wrap(var(--bg));\n  color: cat-token-wrap(var(--fill));\n  font-weight: 600;\n  @include cat-font-smooth;\n}\n\n.cat-button-outlined {\n  background-color: cat-token('color.ui.background.body');\n  box-shadow: inset 0 0 0 1px cat-token-wrap(var(--base), $alpha: 0.2);\n  color: cat-token-wrap(var(--text));\n\n  &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: cat-token-wrap(var(--base), $alpha: 0.05);\n  }\n\n  &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n  }\n}\n\n.cat-button-text {\n  background-color: transparent;\n  color: cat-token-wrap(var(--text));\n  text-decoration: $cat-link-text-decoration;\n\n  &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n    text-decoration: $cat-button-text-decoration-hover;\n    background-color: rgba(var(--base), 0.05);\n  }\n}\n\n@mixin theme($theme) {\n  .cat-button-#{$theme} {\n    --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n    --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    @if $theme == 'secondary' {\n      --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    } @else {\n      --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    }\n\n    &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n      --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)};\n      --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n      --text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)};\n    }\n\n    &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n      --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)};\n      --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n      --text: #{cat-token('color.theme.#{$theme}.textActive', $wrap: false)};\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize, $padding) {\n  $-line-height: cat-body-line-height($fontSize);\n\n  $-total-height: map.get($button-sizes, $size);\n  $-padding-v: ($-total-height - $-line-height) * 0.5;\n  $-padding-h: $padding;\n\n  .cat-button-#{$size} {\n    min-width: map.get($button-sizes, $size);\n    padding: $-padding-v $-padding-h;\n\n    @include cat-body($fontSize);\n\n    .cat-button-prefix {\n      margin-right: 0.25rem;\n    }\n\n    .cat-button-suffix {\n      margin-left: 0.25rem;\n    }\n\n    // normalize icon size for line height\n    @if $fontSize == 'm' {\n      cat-icon {\n        margin-top: -0.125rem;\n        margin-bottom: -0.125rem;\n      }\n    }\n\n    &.cat-button-icon {\n      width: $-total-height;\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    :host-context(nav) & {\n      padding-left: $cat-nav-padding-horizontal;\n      padding-right: $cat-nav-padding-horizontal;\n    }\n  }\n\n  :host(.cat-button-pull[size='#{$size}']) {\n    margin: $-padding-v * -1 $-padding-h * -1;\n  }\n\n  :host(.cat-button-pull-h[size='#{$size}']) {\n    margin-left: $-padding-h * -1;\n    margin-right: $-padding-h * -1;\n  }\n\n  :host(.cat-button-pull-v[size='#{$size}']) {\n    margin-top: $-padding-v * -1;\n    margin-bottom: $-padding-v * -1;\n  }\n\n  :host(.cat-button-pull-t[size='#{$size}']) {\n    margin-top: $-padding-v * -1;\n  }\n\n  :host(.cat-button-pull-l[size='#{$size}']) {\n    margin-left: $-padding-h * -1;\n  }\n\n  :host(.cat-button-pull-b[size='#{$size}']) {\n    margin-bottom: $-padding-v * -1;\n  }\n\n  :host(.cat-button-pull-r[size='#{$size}']) {\n    margin-right: $-padding-h * -1;\n  }\n}\n\n:host(.cat-button-pull:not([size])) {\n  margin: -0.625rem -0.75rem;\n}\n\n:host(.cat-button-pull-h:not([size])) {\n  margin-left: -0.75rem;\n  margin-right: -0.75rem;\n}\n\n:host(.cat-button-pull-v:not([size])) {\n  margin-top: -0.625rem;\n  margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-t:not([size])) {\n  margin-top: -0.625rem;\n}\n\n:host(.cat-button-pull-l:not([size])) {\n  margin-left: -0.75rem;\n}\n\n:host(.cat-button-pull-b:not([size])) {\n  margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-r:not([size])) {\n  margin-right: -0.75rem;\n}\n\n@include size('xs', 's', 0.25rem);\n@include size('s', 'm', 0.5rem);\n@include size('m', 'm', 0.75rem);\n@include size('l', 'm', 1rem);\n@include size('xl', 'l', 1.25rem);\n\n// -- active state\n\n.cat-button-active::before {\n  content: '';\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0.25rem;\n  height: 100%;\n  background: cat-token-wrap(var(--base));\n}\n\n// ----- context\n\n:host-context(nav) {\n  width: 100%;\n\n  .cat-button {\n    box-shadow: none;\n    border-radius: 0;\n    justify-content: left;\n\n    &:focus-visible {\n      outline-offset: -2px;\n    }\n  }\n}\n\n:host(.cat-text-left) .cat-button {\n  justify-content: left;\n}\n\n:host(.cat-text-right) .cat-button {\n  justify-content: right;\n}\n","import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/**\n * Buttons are used for interface actions. Primary style should be used only\n * once per view for main call-to-action.\n *\n * @part button - The native anchor or button element.\n * @part content - The textual content of the button.\n * @part prefix - The prefix icon.\n * @part suffix - The suffix icon.\n */\n@Component({\n  tag: 'cat-button',\n  styleUrl: 'cat-button.scss',\n  shadow: true\n})\nexport class CatButton {\n  private button!: HTMLButtonElement | HTMLAnchorElement;\n  private mediaMatcher?: MediaMatcher;\n  private mediaQueryList?: MediaQueryList;\n  private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n  @State() _iconOnly = true;\n\n  /**\n   * The rendering style of the button.\n   */\n  @Prop() variant: 'filled' | 'outlined' | 'text' = 'outlined';\n\n  /**\n   * The color palette of the button.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'secondary';\n\n  /**\n   * Show an active status indicator on the left side of the button.\n   */\n  @Prop() active = false;\n\n  /**\n   * The size of the button.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The name of the button, which gets paired with the button's value when\n   * submitted as part of a form. Corresponds with the native HTML name\n   * attribute.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the button, which gets paired with the button's name when\n   * submitted as part of a form. Corresponds with the native HTML value\n   * attribute.\n   */\n  @Prop() value?: string;\n\n  /**\n   * Specifies that the button should be disabled. A disabled button is unusable\n   * and un-clickable. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays the button in a loading state with a spinner. Just like a disabled\n   * button, an inactive button is unusable and un-clickable. However, it\n   * retains the current focus state.\n   */\n  @Prop() loading = false;\n\n  /**\n   * Allows the button to submit a form.\n   */\n  @Prop() submit = false;\n\n  /**\n   * Disables ellipse overflowing button content.\n   */\n  @Prop() noEllipsis = false;\n\n  /**\n   * Use round button edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop() url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop() urlTarget?: '_blank' | '_self';\n\n  /**\n   * The name of an icon to be displayed in the button.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Hide the actual button content and only display the icon.\n   */\n  @Prop() iconOnly: boolean | Breakpoint = false;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * Adds a unique identifier for the button. Please note that with this\n   * particular component this ID is added inside the web component. If you need\n   * an ID on the HTML element, use the regular `id` attribute instead.\n   */\n  @Prop() buttonId?: string;\n\n  /**\n   * Adds accessible label for the button that is only shown for screen\n   * readers. Typically, this label text replaces the visible text on the\n   * button for users who use assistive technology.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  @Watch('iconOnly')\n  onIconOnlyChanged(value: boolean | Breakpoint): void {\n    // teardown\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n    this.mediaQueryList = undefined;\n    this.mediaQueryListener = undefined;\n    // setup\n    if (isBreakpoint(value)) {\n      this.mediaMatcher ??= new MediaMatcher();\n      this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n      this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n      this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n      this._iconOnly = this.mediaQueryList.matches;\n    } else {\n      this._iconOnly = value;\n    }\n  }\n\n  /**\n   * Emitted when the button is clicked.\n   */\n  @Event() catClick!: EventEmitter<MouseEvent>;\n\n  /**\n   * Emitted when the button received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad(): void {\n    this.onIconOnlyChanged(this.iconOnly);\n  }\n\n  componentWillRender(): void {\n    if (this.isIconButton && !this.a11yLabel) {\n      log.warn('[A11y] Missing ARIA label on icon button', this);\n    }\n  }\n\n  @Listen('click')\n  haltDisabledEvents(event: Event): void {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  /**\n   * Sets focus on the button. Use this method instead of `button.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.button.focus(options);\n  }\n\n  render() {\n    if (this.url) {\n      return (\n        <a\n          ref={el => (this.button = el as HTMLAnchorElement)}\n          href={this.disabled ? undefined : this.url}\n          target={this.urlTarget}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-label={this.a11yLabel}\n          id={this.buttonId}\n          part=\"button\"\n          class={{\n            'cat-button': true,\n            'cat-button-icon': this.isIconButton,\n            'cat-button-round': this.round,\n            'cat-button-loading': this.loading,\n            'cat-button-disabled': this.disabled,\n            'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n            [`cat-button-${this.variant}`]: Boolean(this.variant),\n            [`cat-button-${this.color}`]: Boolean(this.color),\n            [`cat-button-${this.size}`]: Boolean(this.size)\n          }}\n          onClick={this.onClick.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onBlur={this.onBlur.bind(this)}\n        >\n          {this.content}\n        </a>\n      );\n    } else {\n      return (\n        <button\n          ref={el => (this.button = el as HTMLButtonElement)}\n          type={this.submit ? 'submit' : 'button'}\n          name={this.name}\n          value={this.value}\n          disabled={this.disabled}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-label={this.a11yLabel}\n          id={this.buttonId}\n          part=\"button\"\n          class={{\n            'cat-button': true,\n            'cat-button-active': this.active,\n            'cat-button-icon': this.isIconButton,\n            'cat-button-round': this.round ?? this.isIconButton,\n            'cat-button-loading': this.loading,\n            'cat-button-disabled': this.disabled,\n            'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n            [`cat-button-${this.variant}`]: Boolean(this.variant),\n            [`cat-button-${this.color}`]: Boolean(this.color),\n            [`cat-button-${this.size}`]: Boolean(this.size)\n          }}\n          onClick={this.onClick.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onBlur={this.onBlur.bind(this)}\n        >\n          {this.content}\n        </button>\n      );\n    }\n  }\n\n  private get iconSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n        return 's';\n      default:\n        return 'l';\n    }\n  }\n\n  private get spinnerSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n        return 'xs';\n      default:\n        return 'm';\n    }\n  }\n\n  private get isIconButton() {\n    return Boolean(this.icon) && this._iconOnly;\n  }\n\n  private get hasPrefixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n  }\n\n  private get hasSuffixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n  }\n\n  private get content() {\n    return [\n      this.hasPrefixIcon ? (\n        <cat-icon icon={this.icon} size={this.iconSize} class=\"cat-button-prefix\" part=\"prefix\"></cat-icon>\n      ) : null,\n      this.isIconButton ? (\n        <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>\n      ) : (\n        <span class=\"cat-button-content\" part=\"content\">\n          <slot></slot>\n        </span>\n      ),\n      this.hasSuffixIcon ? (\n        <cat-icon icon={this.icon} size={this.iconSize} class=\"cat-button-suffix\" part=\"suffix\"></cat-icon>\n      ) : null,\n      this.loading ? <cat-spinner size={this.spinnerSize}></cat-spinner> : null\n    ];\n  }\n\n  private onClick(event: MouseEvent) {\n    this.catClick.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}
+{"file":"cat-button2.js","mappings":"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","names":["log"],"sources":["./src/utils/breakpoints.ts","./src/utils/platform.ts","./src/utils/media-matcher.ts","./src/components/cat-button/cat-button.scss?tag=cat-button&encapsulation=shadow","./src/components/cat-button/cat-button.tsx"],"sourcesContent":["const _breakpoints = ['xs', 's', 'm', 'l', 'xl'] as const;\n\nexport type Breakpoint = typeof _breakpoints[number];\n\nexport const Breakpoints: { [breakpoint in Breakpoint]: string } = {\n  xs: '(max-width: 539.98px)',\n  s: '(max-width: 767.98px)',\n  m: '(max-width: 991.98px)',\n  l: '(max-width: 1199.98px)',\n  xl: '(max-width: 1399.98px)'\n};\n\nexport function isBreakpoint(value: unknown): value is Breakpoint {\n  return typeof value === 'string' && _breakpoints.includes(value as Breakpoint);\n}\n","// https://github.com/angular/components/blob/master/src/cdk/platform/platform.ts\n\n// Whether the current platform supports the V8 Break Iterator. The V8 check\n// is necessary to detect all Blink based browsers.\nlet hasV8BreakIterator: boolean;\n\n// We need a try/catch around the reference to `Intl`, because accessing it in some cases can\n// cause IE to throw. These cases are tied to particular versions of Windows and can happen if\n// the consumer is providing a polyfilled `Map`. See:\n// https://github.com/Microsoft/ChakraCore/issues/3189\n// https://github.com/angular/components/issues/15687\ntry {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  hasV8BreakIterator = typeof Intl !== 'undefined' && (Intl as any).v8BreakIterator;\n} catch {\n  hasV8BreakIterator = false;\n}\n\nexport class Platform {\n  /** Whether the current browser is Microsoft Edge. */\n  EDGE: boolean = /(edge)/i.test(navigator.userAgent);\n\n  /** Whether the current rendering engine is Microsoft Trident. */\n  TRIDENT: boolean = /(msie|trident)/i.test(navigator.userAgent);\n\n  // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.\n  /** Whether the current rendering engine is Blink. */\n  BLINK: boolean =\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    !!((window as any).chrome || hasV8BreakIterator) && typeof CSS !== 'undefined' && !this.EDGE && !this.TRIDENT;\n\n  // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to\n  // ensure that Webkit runs standalone and is not used as another engine's base.\n  /** Whether the current rendering engine is WebKit. */\n  WEBKIT: boolean = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;\n\n  /** Whether the current platform is Apple iOS. */\n  IOS: boolean = /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);\n\n  // It's difficult to detect the plain Gecko engine, because most of the browsers identify\n  // them self as Gecko-like browsers and modify the userAgent's according to that.\n  // Since we only cover one explicit Firefox case, we can simply check for Firefox\n  // instead of having an unstable check for Gecko.\n  /** Whether the current browser is Firefox. */\n  FIREFOX: boolean = /(firefox|minefield)/i.test(navigator.userAgent);\n\n  /** Whether the current platform is Android. */\n  // Trident on mobile adds the android platform to the userAgent to trick detections.\n  ANDROID: boolean = /android/i.test(navigator.userAgent) && !this.TRIDENT;\n\n  // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake\n  // this and just place the Safari keyword in the userAgent. To be more safe about Safari every\n  // Safari browser should also use Webkit as its layout engine.\n  /** Whether the current browser is Safari. */\n  SAFARI: boolean = /safari/i.test(navigator.userAgent) && this.WEBKIT;\n}\n","import log from 'loglevel';\nimport { Platform } from './platform';\n\n// https://github.com/angular/components/blob/master/src/cdk/layout/media-matcher.ts\n\n/** Global registry for all dynamically-created, injected media queries. */\nconst mediaQueriesForWebkitCompatibility: Set<string> = new Set<string>();\n\n/** Style tag that holds all of the dynamically-created media queries. */\nlet mediaQueryStyleNode: HTMLStyleElement | undefined;\n\n/** A utility for calling matchMedia queries. */\nexport class MediaMatcher {\n  private _platform;\n  private _matchMedia: (query: string) => MediaQueryList;\n\n  constructor() {\n    this._platform = new Platform();\n    this._matchMedia = window.matchMedia.bind(window);\n  }\n\n  /**\n   * Evaluates the given media query and returns the native MediaQueryList from which results\n   * can be retrieved.\n   * Confirms the layout engine will trigger for the selector query provided and returns the\n   * MediaQueryList for the query provided.\n   */\n  matchMedia(query: string): MediaQueryList {\n    if (this._platform.WEBKIT || this._platform.BLINK) {\n      createEmptyStyleRule(query);\n    }\n    return this._matchMedia(query);\n  }\n}\n\n/**\n * Creates an empty stylesheet that is used to work around browser inconsistencies related to\n * `matchMedia`. At the time of writing, it handles the following cases:\n * 1. On WebKit browsers, a media query has to have at least one rule in order for `matchMedia`\n * to fire. We work around it by declaring a dummy stylesheet with a `@media` declaration.\n * 2. In some cases Blink browsers will stop firing the `matchMedia` listener if none of the rules\n * inside the `@media` match existing elements on the page. We work around it by having one rule\n * targeting the `body`. See https://github.com/angular/components/issues/23546.\n */\nfunction createEmptyStyleRule(query: string) {\n  if (mediaQueriesForWebkitCompatibility.has(query)) {\n    return;\n  }\n\n  try {\n    if (!mediaQueryStyleNode) {\n      mediaQueryStyleNode = document.createElement('style');\n      mediaQueryStyleNode.setAttribute('type', 'text/css');\n      document.head.appendChild(mediaQueryStyleNode);\n    }\n    if (mediaQueryStyleNode.sheet) {\n      mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);\n      mediaQueriesForWebkitCompatibility.add(query);\n    }\n  } catch (e) {\n    log.error(e);\n  }\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$button-sizes: (\n  'xl': 3.5rem,\n  'l': 3rem,\n  'm': 2.5rem,\n  's': 2rem,\n  'xs': 1.5rem\n);\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.cat-button {\n  position: relative;\n  font: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: cat-border-radius('m');\n  text-decoration: none;\n  width: 100%;\n  box-sizing: border-box;\n  cursor: pointer;\n  transition: color cat-token('time.transition.s') linear, border-color cat-token('time.transition.s') linear,\n    background-color cat-token('time.transition.s') linear, box-shadow cat-token('time.transition.s') linear;\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n// ----- content\n\n.cat-button-content {\n  @include cat-break-word;\n  // flex: 1 1 auto;\n  // text-align: center;\n\n  .cat-button-ellipsed & {\n    @include cat-ellipsis;\n  }\n}\n\n// ----- disabled\n\n.cat-button-disabled {\n  @include cat-disabled;\n}\n\n// ----- round\n\n.cat-button-round {\n  border-radius: 10rem;\n}\n\n// ----- loading\n\n.cat-button-loading {\n  cursor: default;\n\n  cat-spinner {\n    position: absolute;\n  }\n\n  > *:not(cat-spinner) {\n    visibility: hidden;\n  }\n}\n\n// ----- theme\n\n.cat-button-filled {\n  background-color: cat-token-wrap(var(--bg));\n  color: cat-token-wrap(var(--fill));\n  font-weight: 600;\n  @include cat-font-smooth;\n}\n\n.cat-button-outlined {\n  background-color: cat-token('color.ui.background.body');\n  box-shadow: inset 0 0 0 1px cat-token-wrap(var(--base), $alpha: 0.2);\n  color: cat-token-wrap(var(--text));\n\n  &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: cat-token-wrap(var(--base), $alpha: 0.05);\n  }\n\n  &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n  }\n}\n\n.cat-button-text {\n  background-color: transparent;\n  color: cat-token-wrap(var(--text));\n  text-decoration: $cat-link-text-decoration;\n\n  &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n    text-decoration: $cat-button-text-decoration-hover;\n    background-color: rgba(var(--base), 0.05);\n  }\n}\n\n@mixin theme($theme) {\n  .cat-button-#{$theme} {\n    --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n    --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    @if $theme == 'secondary' {\n      --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    } @else {\n      --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    }\n\n    &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n      --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)};\n      --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n      --text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)};\n    }\n\n    &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n      --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)};\n      --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n      --text: #{cat-token('color.theme.#{$theme}.textActive', $wrap: false)};\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize, $padding) {\n  $-line-height: cat-body-line-height($fontSize);\n\n  $-total-height: map.get($button-sizes, $size);\n  $-padding-v: ($-total-height - $-line-height) * 0.5;\n  $-padding-h: $padding;\n\n  .cat-button-#{$size} {\n    min-width: map.get($button-sizes, $size);\n    padding: $-padding-v $-padding-h;\n\n    @include cat-body($fontSize);\n\n    .cat-button-prefix {\n      margin-right: 0.25rem;\n    }\n\n    .cat-button-suffix {\n      margin-left: 0.25rem;\n    }\n\n    // normalize icon size for line height\n    @if $fontSize == 'm' {\n      cat-icon {\n        margin-top: -0.125rem;\n        margin-bottom: -0.125rem;\n      }\n    }\n\n    &.cat-button-icon {\n      width: $-total-height;\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    :host-context(nav) & {\n      padding-left: $cat-nav-padding-horizontal;\n      padding-right: $cat-nav-padding-horizontal;\n    }\n  }\n\n  :host(.cat-button-pull[size='#{$size}']) {\n    margin: $-padding-v * -1 $-padding-h * -1;\n  }\n\n  :host(.cat-button-pull-h[size='#{$size}']) {\n    margin-left: $-padding-h * -1;\n    margin-right: $-padding-h * -1;\n  }\n\n  :host(.cat-button-pull-v[size='#{$size}']) {\n    margin-top: $-padding-v * -1;\n    margin-bottom: $-padding-v * -1;\n  }\n\n  :host(.cat-button-pull-t[size='#{$size}']) {\n    margin-top: $-padding-v * -1;\n  }\n\n  :host(.cat-button-pull-l[size='#{$size}']) {\n    margin-left: $-padding-h * -1;\n  }\n\n  :host(.cat-button-pull-b[size='#{$size}']) {\n    margin-bottom: $-padding-v * -1;\n  }\n\n  :host(.cat-button-pull-r[size='#{$size}']) {\n    margin-right: $-padding-h * -1;\n  }\n}\n\n:host(.cat-button-pull:not([size])) {\n  margin: -0.625rem -0.75rem;\n}\n\n:host(.cat-button-pull-h:not([size])) {\n  margin-left: -0.75rem;\n  margin-right: -0.75rem;\n}\n\n:host(.cat-button-pull-v:not([size])) {\n  margin-top: -0.625rem;\n  margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-t:not([size])) {\n  margin-top: -0.625rem;\n}\n\n:host(.cat-button-pull-l:not([size])) {\n  margin-left: -0.75rem;\n}\n\n:host(.cat-button-pull-b:not([size])) {\n  margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-r:not([size])) {\n  margin-right: -0.75rem;\n}\n\n@include size('xs', 's', 0.25rem);\n@include size('s', 'm', 0.5rem);\n@include size('m', 'm', 0.75rem);\n@include size('l', 'm', 1rem);\n@include size('xl', 'l', 1.25rem);\n\n// -- active state\n\n.cat-button-active::before {\n  content: '';\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0.25rem;\n  height: 100%;\n  background: cat-token-wrap(var(--base));\n}\n\n// ----- context\n\n:host-context(nav) {\n  width: 100%;\n\n  .cat-button {\n    box-shadow: none;\n    border-radius: 0;\n    justify-content: left;\n\n    &:focus-visible {\n      outline-offset: -2px;\n    }\n  }\n}\n\n:host(.cat-text-left) .cat-button {\n  justify-content: left;\n}\n\n:host(.cat-text-right) .cat-button {\n  justify-content: right;\n}\n","import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/**\n * Buttons are used for interface actions. Primary style should be used only\n * once per view for main call-to-action.\n *\n * @part button - The native anchor or button element.\n * @part content - The textual content of the button.\n * @part prefix - The prefix icon.\n * @part suffix - The suffix icon.\n */\n@Component({\n  tag: 'cat-button',\n  styleUrl: 'cat-button.scss',\n  shadow: true\n})\nexport class CatButton {\n  private button!: HTMLButtonElement | HTMLAnchorElement;\n  private mediaMatcher?: MediaMatcher;\n  private mediaQueryList?: MediaQueryList;\n  private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n  @State() _iconOnly = true;\n\n  /**\n   * The rendering style of the button.\n   */\n  @Prop() variant: 'filled' | 'outlined' | 'text' = 'outlined';\n\n  /**\n   * The color palette of the button.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'secondary';\n\n  /**\n   * Show an active status indicator on the left side of the button.\n   */\n  @Prop() active = false;\n\n  /**\n   * The size of the button.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The name of the button, which gets paired with the button's value when\n   * submitted as part of a form. Corresponds with the native HTML name\n   * attribute.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the button, which gets paired with the button's name when\n   * submitted as part of a form. Corresponds with the native HTML value\n   * attribute.\n   */\n  @Prop() value?: string;\n\n  /**\n   * Specifies that the button should be disabled. A disabled button is unusable\n   * and un-clickable. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays the button in a loading state with a spinner. Just like a disabled\n   * button, an inactive button is unusable and un-clickable. However, it\n   * retains the current focus state.\n   */\n  @Prop() loading = false;\n\n  /**\n   * Allows the button to submit a form.\n   */\n  @Prop() submit = false;\n\n  /**\n   * Disables ellipse overflowing button content.\n   */\n  @Prop() noEllipsis = false;\n\n  /**\n   * Use round button edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop() url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop() urlTarget?: '_blank' | '_self';\n\n  /**\n   * The name of an icon to be displayed in the button.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Hide the actual button content and only display the icon.\n   */\n  @Prop() iconOnly: boolean | Breakpoint = false;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * Adds a unique identifier for the button. Please note that with this\n   * particular component this ID is added inside the web component. If you need\n   * an ID on the HTML element, use the regular `id` attribute instead.\n   */\n  @Prop() buttonId?: string;\n\n  /**\n   * Adds accessible label for the button that is only shown for screen\n   * readers. Typically, this label text replaces the visible text on the\n   * button for users who use assistive technology.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  @Watch('iconOnly')\n  onIconOnlyChanged(value: boolean | Breakpoint): void {\n    // teardown\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n    this.mediaQueryList = undefined;\n    this.mediaQueryListener = undefined;\n    // setup\n    if (isBreakpoint(value)) {\n      this.mediaMatcher ??= new MediaMatcher();\n      this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n      this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n      this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n      this._iconOnly = this.mediaQueryList.matches;\n    } else {\n      this._iconOnly = value;\n    }\n  }\n\n  /**\n   * Emitted when the button is clicked.\n   */\n  @Event() catClick!: EventEmitter<MouseEvent>;\n\n  /**\n   * Emitted when the button received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad(): void {\n    this.onIconOnlyChanged(this.iconOnly);\n  }\n\n  componentWillRender(): void {\n    if (this.isIconButton && !this.a11yLabel) {\n      log.warn('[A11y] Missing ARIA label on icon button', this);\n    }\n  }\n\n  @Listen('click')\n  haltDisabledEvents(event: Event): void {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  /**\n   * Sets focus on the button. Use this method instead of `button.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.button.focus(options);\n  }\n\n  render() {\n    if (this.url) {\n      return (\n        <a\n          ref={el => (this.button = el as HTMLAnchorElement)}\n          href={this.disabled ? undefined : this.url}\n          target={this.urlTarget}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-label={this.a11yLabel}\n          id={this.buttonId}\n          part=\"button\"\n          class={{\n            'cat-button': true,\n            'cat-button-icon': this.isIconButton,\n            'cat-button-round': this.round,\n            'cat-button-loading': this.loading,\n            'cat-button-disabled': this.disabled,\n            'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n            [`cat-button-${this.variant}`]: Boolean(this.variant),\n            [`cat-button-${this.color}`]: Boolean(this.color),\n            [`cat-button-${this.size}`]: Boolean(this.size)\n          }}\n          onClick={this.onClick.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onBlur={this.onBlur.bind(this)}\n        >\n          {this.content}\n        </a>\n      );\n    } else {\n      return (\n        <button\n          ref={el => (this.button = el as HTMLButtonElement)}\n          type={this.submit ? 'submit' : 'button'}\n          name={this.name}\n          value={this.value}\n          disabled={this.disabled}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-label={this.a11yLabel}\n          id={this.buttonId}\n          part=\"button\"\n          class={{\n            'cat-button': true,\n            'cat-button-active': this.active,\n            'cat-button-icon': this.isIconButton,\n            'cat-button-round': this.round ?? this.isIconButton,\n            'cat-button-loading': this.loading,\n            'cat-button-disabled': this.disabled,\n            'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n            [`cat-button-${this.variant}`]: Boolean(this.variant),\n            [`cat-button-${this.color}`]: Boolean(this.color),\n            [`cat-button-${this.size}`]: Boolean(this.size)\n          }}\n          onClick={this.onClick.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onBlur={this.onBlur.bind(this)}\n        >\n          {this.content}\n        </button>\n      );\n    }\n  }\n\n  private get iconSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n        return 's';\n      default:\n        return 'l';\n    }\n  }\n\n  private get spinnerSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n        return 'xs';\n      default:\n        return 'm';\n    }\n  }\n\n  private get isIconButton() {\n    return Boolean(this.icon) && this._iconOnly;\n  }\n\n  private get hasPrefixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n  }\n\n  private get hasSuffixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n  }\n\n  private get content() {\n    return [\n      this.hasPrefixIcon ? (\n        <cat-icon icon={this.icon} size={this.iconSize} class=\"cat-button-prefix\" part=\"prefix\"></cat-icon>\n      ) : null,\n      this.isIconButton ? (\n        <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>\n      ) : (\n        <span class=\"cat-button-content\" part=\"content\">\n          <slot></slot>\n        </span>\n      ),\n      this.hasSuffixIcon ? (\n        <cat-icon icon={this.icon} size={this.iconSize} class=\"cat-button-suffix\" part=\"suffix\"></cat-icon>\n      ) : null,\n      this.loading ? <cat-spinner size={this.spinnerSize}></cat-spinner> : null\n    ];\n  }\n\n  private onClick(event: MouseEvent) {\n    this.catClick.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}

package/dist/components/cat-checkbox.js

@@ -1,118 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { l as loglevel } from './loglevel.js';
-import { C as CatFormHint } from './cat-form-hint.js';
-
-const catCheckboxCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative}.label-left{flex-direction:row-reverse}.label-left input{right:1px;left:unset}input{position:absolute;width:1.25rem;height:1.25rem;margin:0;opacity:0;cursor:inherit;left:1px;top:0.5px}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid #d7dbe0;border-radius:0.125rem;transition:background-color 0.13s ease, border-color 0.13s ease;pointer-events:none}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:70%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
-
-let nextUniqueId = 0;
-const CatCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.catChange = createEvent(this, "catChange", 7);
-    this.catFocus = createEvent(this, "catFocus", 7);
-    this.catBlur = createEvent(this, "catBlur", 7);
-    this.id = `cat-checkbox-${nextUniqueId++}`;
-    this.hasSlottedLabel = false;
-    /**
-     * Checked state of the checkbox
-     */
-    this.checked = false;
-    /**
-     * Disabled state of the checkbox
-     */
-    this.disabled = false;
-    /**
-     * Indeterminate state of the checkbox
-     */
-    this.indeterminate = false;
-    /**
-     * Label of the checkbox which is presented in the UI
-     */
-    this.label = '';
-    /**
-     * Visually hide the label, but still show it to assistive technologies like screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * Required state of the checkbox
-     */
-    this.required = false;
-    /**
-     * Whether the label should appear to the left of the checkbox.
-     */
-    this.labelLeft = false;
-  }
-  componentDidLoad() {
-    if (this.input && this.indeterminate) {
-      this.input.indeterminate = true;
-    }
-  }
-  componentWillRender() {
-    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
-    if (!this.label && !this.hasSlottedLabel) {
-      loglevel.error('[A11y] Missing ARIA label on checkbox', this);
-    }
-  }
-  /**
-   * Sets focus on the checkbox. Use this method instead of `checkbox.focus()`.
-   *
-   * @param options An optional object providing options to control aspects of
-   * the focusing process.
-   */
-  async setFocus(options) {
-    this.input.focus(options);
-  }
-  render() {
-    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value !== undefined ? String(this.value) : this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
-  }
-  get hintSection() {
-    const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-    return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
-  }
-  onInput(event) {
-    this.checked = this.input.checked;
-    if (!this.value || typeof this.value === 'boolean') {
-      this.value = this.checked;
-    }
-    this.catChange.emit(event);
-  }
-  onFocus(event) {
-    this.catFocus.emit(event);
-  }
-  onBlur(event) {
-    this.catBlur.emit(event);
-  }
-  get hostElement() { return this; }
-  static get style() { return catCheckboxCss; }
-}, [1, "cat-checkbox", {
-    "checked": [1028],
-    "disabled": [4],
-    "indeterminate": [4],
-    "label": [1],
-    "labelHidden": [4, "label-hidden"],
-    "name": [1],
-    "required": [4],
-    "value": [1032],
-    "hint": [1],
-    "labelLeft": [4, "label-left"],
-    "hasSlottedLabel": [32],
-    "setFocus": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cat-checkbox"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cat-checkbox":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CatCheckbox$1);
-      }
-      break;
-  } });
-}
+import { C as CatCheckbox$1, d as defineCustomElement$1 } from './cat-checkbox2.js';
 
 const CatCheckbox = CatCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/cat-checkbox.js.map

@@ -1 +1 @@
-{"file":"cat-checkbox.js","mappings":"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","names":["CatCheckbox","log"],"sources":["./src/components/cat-checkbox/cat-checkbox.scss?tag=cat-checkbox&encapsulation=shadow","./src/components/cat-checkbox/cat-checkbox.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$checkbox-width: 1.25rem;\n$checkbox-height: 1.25rem;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  flex: 0 1 auto;\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  @include cat-select(none);\n  cursor: pointer;\n  position: relative;\n}\n\n.label-left {\n  flex-direction: row-reverse;\n\n  input {\n    right: 1px;\n    left: unset;\n  }\n}\n\ninput {\n  position: absolute;\n  width: $checkbox-width;\n  height: $checkbox-height;\n  margin: 0;\n  opacity: 0;\n  cursor: inherit;\n  left: 1px;\n  top: 0.5px;\n}\n\n.box {\n  flex: 0 0 auto;\n  display: flex;\n  position: relative;\n  height: $checkbox-height;\n  width: $checkbox-width;\n  background-color: cat-token('color.ui.background.input');\n  border: 1px solid cat-token('color.ui.border.input');\n  border-radius: cat-border-radius(s);\n  transition: background-color cat-token('time.transition.s') ease, border-color cat-token('time.transition.s') ease;\n  pointer-events: none;\n\n  svg {\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-dasharray: 16px;\n    stroke-dashoffset: 16px;\n    transition: all cat-token('time.transition.s') ease;\n    width: 70%;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(0.99);\n  }\n\n  :checked + & {\n    background-color: cat-token('color.theme.primary.bg');\n    border-color: cat-token('color.theme.primary.bg');\n    stroke: cat-token('color.theme.primary.fill');\n\n    .check {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  :indeterminate + & {\n    background-color: cat-token('color.theme.primary.bg');\n    border-color: cat-token('color.theme.primary.bg');\n    stroke: cat-token('color.theme.primary.fill');\n\n    .dash {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  :focus-visible + & {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n.label {\n  flex: 1 1 auto;\n\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n *\n * @slot hint - Optional hint element to be displayed with the checkbox.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part checkbox - The checkbox element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-checkbox',\n  styleUrls: ['cat-checkbox.scss'],\n  shadow: true\n})\nexport class CatCheckbox {\n  private readonly id = `cat-checkbox-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Checked state of the checkbox\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Disabled state of the checkbox\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Indeterminate state of the checkbox\n   */\n  @Prop() indeterminate = false;\n\n  /**\n   * Label of the checkbox which is presented in the UI\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the input\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the checkbox\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the checkbox\n   */\n  @Prop({ mutable: true }) value?: string | boolean;\n\n  /**\n   * Optional hint text(s) to be displayed with the checkbox.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the checkbox.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Emitted when the checked status of the checkbox is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the checkbox received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentDidLoad() {\n    if (this.input && this.indeterminate) {\n      this.input.indeterminate = true;\n    }\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on checkbox', this);\n    }\n  }\n\n  /**\n   * Sets focus on the checkbox. Use this method instead of `checkbox.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n        >\n          <input\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value !== undefined ? String(this.value) : this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          />\n          <span class=\"box\" aria-hidden=\"true\" part=\"checkbox\">\n            <svg class=\"check\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n            </svg>\n            <svg class=\"dash\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 5 10.5 5\"></polyline>\n            </svg>\n          </span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onInput(event: Event) {\n    this.checked = this.input.checked;\n\n    if (!this.value || typeof this.value === 'boolean') {\n      this.value = this.checked;\n    }\n    this.catChange.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}
+{"file":"cat-checkbox.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}